Posts Tagged ‘ typography ’

Class notes: Sketches and Wireframes

I started class today with a few announcements:

  1. If you are serious about learning more in the area of HCI, there is a course at Purdue, IE/PSYCH 577  Human Factors in Engineering (Purdue Catalog description) that covers in depth the topics we mentioned in the presentations about “Designing with the Mind in Mind.” It is taught by Dr. Robert Proctor, a legend in the field of human factors. If you have or are taking that course and can comment on its utility for students interested in user-centered design, please do so below.
  2. I’ve been contacted by someone who will pay a student to develop an Android app – email me if you want more details.

As we got to work, I wanted to clarify the concept of affordance and what an important role the body plays in seeing affordances in the physical world. I illustrated this with the slides below which show the difference in perceived affordances of common objects between humans and cats.

In the digital world, affordances are often communicated by making references to objects from the physical world. This is the concept of metaphor (this is the website I showed in class). However, metaphors have disadvantages when they impose the limitations of the physical world onto the digital one. Also, when taken too far, metaphors lead to skeumorphism, which is a tacky and outdated idea. We also discussed how metaphors can be outdated and become meaningless.

Next, we talked about using grid systems for alignment. The point is to limit the number of vertical alignments on a page. This will help you organize information better. This is the website I showed in class, where you can show and hide the grid on demand. I also recommend the book Making and Breaking the Grid.

Also, remember visual hierarchy. You can use size, color, shape, or texture contrast to make an object stand out and make it the first thing people look at. To assess visual hierarchy, use this simple test:

  • close your eyes
  • look at the screen and notice: what do you see first, second, third?
  • note what design elements are used to lead your eye from #1 to #2 and on.

Below are the slides on visual hierarchy I use in my undergraduate course.

Last, I mentioned typography – more about it in this other blog post.

A graphic design course can help you learn more about these things. As a user experience designer, if you know visual design, that is wonderful. You might be a UX unicorn! But if you are not a visual artist, you should at least be able to talk about these things intelligently.

You do need to know at least grids and visual hierarchy to create wireframes – for mockups, you do need a visual designer!

We spent the rest of class storyboarding a pizza ordering app and creating some wireframes.


Typography and User Experience

In User Experience, typography has 2 main roles:

  1. usability – legibility and readability
  2. mood

1. Typography is an important part of usability. The way the letters look influence readability. Readability is defined as comprehension/understanding of the text. One prerequisite of readability is legibility. Legibility is the ability to decipher the characters. Legibility is influenced by character type, spacing, weight of the lines, etc.

2. Choice of typeface can set the mood of a product – playful, formal, old-fashioned, modern, etc.

I have compiled a list of resources for you to help you get started in understanding typography. Please consider them required class reading.

This slide deck introduces fundamental concepts of typography:

And finally, one of my favorite slide decks on Slideshare that explains not as much about legibility but more about mood and emotion:

If you are interested in learning more, see the list of top 10 most recommended books on typography by designers.