IAT-339: 07 The Content King

IAT-339: 07 The Content King — A slide deck

FCAT Undergraduate Conference is on March 9th, 2018 from 3-7pm

The Content King

Lecture outline

Covered this week:

  • Considerations of quality content
  • JavaScript basics

Lecture slides will be made available on the day of the lecture.

P01 Grade Concerns

Common coding errors:

  • Not setting a language for your page (lang="en")
  • Missing alt text
  • Improperly nested headers
  • Typoes: Forgetting to trap something in a comment, wrong property, wrong value
  • Not escaping characters (i.e. < and >)
  • labels and form fields
  • Using old standards (i.e. tables for layout)
  • Broken links

Should you have any concerns with your grade, please review any comments and the rubric before contacting us.

The Content King

Please close all laptops.

Supporting Users

Research from Google shows that 90 percent of people start a task using one device, then pick it up later on another device...
Windows on the Web (Karen McGrane)

Appropriate content is right for the user or context.

An eyetracker heat-map exemplifying that we do not look at ads on the page
Banner Blindness (Jakob Nielson)
An eyetracker heat-map exemplifying that we do not look at ads on the page
What design considerations should we take with our content to avoid the problem illustrated?

Useful content should fulfill a clear and specific purpose.

Why might there be a concern with each of these options?

Images, video, and audio are content too

Just like we think about text user experience, we can also think about photo user experience (or audio, or video...)

A phone support worker looking extremely happy
What does this photo evoke?

What are you really paying attention to?

An animation of someone following directions to click arrows, but are clicking on the wrong ones
"I am clicking the f#%!ing arrows!" (Bad UX Blog)
An animation of someone following directions to click arrows, but are clicking on the wrong ones
What error has the designer committed here?

Content should be user-centered.

An image comparing the Ikea desktop and mobile sites
Why might this be a problem?

Ask yourself: Does my user understand the language of my website?

Consider:

  • Menu
  • Navigation
  • The links place

Keep content concise.

The Web is Lots of Type

"It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to [them]."
Emil Ruder

Hiding Content

A tension

Progressive Disclosure (UX Patterns)
An example of using progressive disclosure in an accordian menu
An example of using progressive disclosure in an accordian menu

Content needs maintenance.

Ask yourself: Has my website's content been maintained?

Maintaining a Tone

Let's take a look at MailChimp's Voice and Tone guide.

Working with JavaScript

When coding/testing JavaScript:

  1. Always progressively enhance
  2. Have the console open
  3. Know your DOM + selectors

Rule 1: Progressively Enhance

Things should work as if javascript did not exist.

Rule 2: Console Open

The console lets you see JavaScript errors. Otherwise your code is a magical mystery box.

// Statements
var a = b * 2;

// Expressions
// 2; literal
// b; variable (get a value)
// b*2; arithmetic
// a = b * 2; assignment

Rule 3: Know Your DOM + selectors

You need to know what you are selecting, and how we move through the DOM.

<!-- What would be three possible selectors for our second <a> tag? -->
<div class="column">
<nav id="navi-main">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
</div>

JavaScript fundamentals

Let's open the console.

Break-time

I recommend plotting your next hike.

A small babbling brook

P02 Due Next Week

Remember to include footer links for:

  • 1 URL for citations
  • 1 URL to your complete style guide
  • 1 URL to your GitHub repository

Next week's lecture is about unicorns and you.

Next week's reading

"Let's Talk About Design Portfolios" and "The Worst Portfolio Ever"

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1