cui_spring2021

Week 6

Procedure

User Experience versus User Interface
UX workshop demo

Creating a responsive site - UX/UI example

This course is primarily focused on User Interfaces. But we will also touch on User Experience.

We have covered user interfaces since the beginning of the semester. This covers anything a user interacts with, from keyboards to touchscreens to sound or light.

User Experience is a more recent concept that User Interface. The term was coined in the 90s by Don Norman, a cognitive scientist hired by Apple and includes a broader definition to look at the entire experience of using a tool or product, not just its interface.

UI refers to the elements that a person interacts with. UX refers to what that person using the product or service takes away from their entire experience.

A UI designer is focused on the design of the tool. A UX designer is focused on the user’s experience of that tool.

User Experience honeycomb
Usability honeycomb, by Peter Moreville

This usability honeycomb is meant to point to the effective elements that contribute to good user experiences.

Example of UX design

In this workshop demo I’ll show an example of building a single page website info page with an eye toward a good UX experience.

We’ll build a demo information site for a new project or company. It will feature text and icons and a way for someone interested to get in touch with us.

Tools:

HTML
CSS Flexbox
Google Fonts
FontAwesome <– actually, these are icons, despite the name

We’ll start by creating a basic webpage on Glitch.com

We’re going to do some information design and break down our content into logical sections. These sections are what I’m building, but you could have a different amount of sections, or different categories than mine here.

header
about
values
mission
contact

We’ll start by building out our simple HTML and adding in these needed sections. Here’s just the <body> section.

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</body

Now I’m going to give them each I.D.’s so I can assign them unique CSS if I’d like to.

<body>
  <div id="header">1</div>
  <div id="about">2</div>
  <div id="values">3</div>
  <div id="mission">4</div>
  <div id="contact">5</div>
</body
`

If I want to make some css that should be applied to each of the <div>s in the body, I could invent a class, and set each div to have that class as well.

for example:

...
<div id="header" class="section">1</div>
<div id="about" class="section">2</div>
...

But I’m going to take a different approach. Since each of these <div>s are children of the <body>, I can use a special css indicator that says select all div that are children of the body.

It looks ilke this:

body > div {
  width: 100%;
  min-height: 30vh;
}

Recall that vh stands for viewport units. I specified a minimum height instead of just a height. This will allow the page to scale to different screen sizes.

To help me debug, I’ll add a border property so I can properly see the edges of all <div>s normally-invisible css box model.

border: solid 1px blue;

Centering

We haven’t yet put content in these blocks, but let’s get ready for it by adding CSS to center the content in each div horizontally and vertically. We’ll do this with flexbox.

We will set each section to be its own flexbox by adding in display: flex;

We’ll justify-content to the center.

We’ll align-items to the center as well.

body > div {
  width: 100%;
  min-height: 30vh;
  border: solid 1px blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

Now we can go in and differentiate our sections with different colors.

You can decide your own palette of colors, or visit a website, for example w3Schools color palettes or coolors.co.

For simplicity and readability, I’m going to use a 4-color pallete: 1 bright stand-out color, 2 subtle background offwhite colors, and black for most text.

I start by giving a nice standout color background for the top header, and white to the text, that will contrast nicely. I could also add some font-size styling here as well.

I also want the elements inside my header to flow top to bottom, so I’ll add flex-direction: column;. Remember that we set each individual block to be its own flexbox earlier in our CSS.

#header {
  background-color: #4040a1;
  color: #ffffff;
  flex-direction: column;
}

For readability’s sake, we will have the rest of the page’s blocks alternate with white values. The background color is white by default, so we only need to pick an offwhite color as well and assign it to the alternating blocks. We’ll create a reusable class.

.bg-grey { 
  background-color: #f6f6f6 
}

And then we can assign it to our alternating blocks inside their div with class="bg-grey".

At this point we have the 5 sections, a header with some content. The top header is a bright color. The rest are alternating between white and grey.

Now that we have these differentiated sections, let’s subdivide them further still. We’ll break each of the middle blocks (2, 3 and 4) into two sections, made up of an icon on the left, and some text on the right.

Let’s assign each of these a class section and place 2 divs inside.

Example:

<div id="about" class="section">
  <div class="small-div">
    small
  </div>    
  <div class="big-div">
    big
  </div>
</div>

We’ll also set the flex-direction of each of their containers to row. Note that again we didn’t need to set its display to felxbox since we used that trick at the beginning to set all child divs of body to be flexboxs already!

Fontawesome icons

You can get started with Font-awesome without having to register.

Add the font-awesome stylesheet link in the <head> section before your own stylesheet link.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Go to the icons section of font-awesome and find an icon that you’d like to use.

Copy the class code it gives you. Let’s put it in one of the small-div sections.

You’ll see the icon is wayyyyy too small. Let’s add a special class from font-awesome. We can add the class fa-10x to make it 10 times as large. Let’s also add a color, the same as your header background color, to the icon on our css.

Responsiveness

Okay, we’re starting to get somewhere, but this won’t look good on small screens yet. We can add flex-wrap: wrap; to our section class so when we’re on a small screen it will bump the next div down.

Clean-up

Let’s make the details look nice.

We can add some padding.

.section > div {
  padding: 30px;
}

Let’s also remove the margin around the body, which is about 2pixels by default on most browsers.

body {
  margin: 0;
}

Add some content

At this point I add in more dummy text and icons.

I’ll remove the border red line.

And our style sucks. It’s really bad and uninviting. Let’s fix our fonts first by looking on Google fonts.

We covered how to use Google fonts in a previous class. Remember that you must link to the font’s stylesheet prior to your own stylesheet in the <head> section of your html page.

Workshop: Continuing Iterative Design Process

Internal reviews

This is done with your own team/collaborators. Fast, find your best goals. Not as favored as independent user interviews.

User interviews

Convene at least five interviewees. Ask them questions relating to the design brief. This is considered the most ideal approach to follow when it’s feasible.

Example questions:

what challenges do they face?
what do they already use to accomplish that task/activity?
show them prototypes - what do they like/dislike about this plan?
what similar programs do they like?
what would they change?

The goal is to gather research/data, then update your design brief.

Usability Testing

Now is the time to gather people to test your design. You’ll let them interact with your prototype, by pressing, clicking, potentially “even Wizard of Oz” approaches like we learned about from David Reinfurt’s test of the prototype Metrocard screens.

Like our earlier co-designing session it’s best to observe rather than engage in a back-and-forth conversation as you do not want to influence their actions. Ask questions to find out what the user likes, dislikes, finds intuitive, confusing, and whether it meets their needs.

Based on user usability testing you’ll go back to the design and refine it. You made need to do more usability testing.

Based on this work it’s time to build the interface by translating your revised prototype into code.

Like our earlier usability testing, after you’ve built the first version of the interface in code you’ll need to test and observe its use. Based on this you will likely need to do successive layers of building, refinement and testing until you get to a final version everyone is happy with.