Posts Tagged ‘ Readings ’

Conceptual Design

Please look at the slides below. They take class conversation one step further, and show how you present the ideas you create using sketches, storyboards, wireframes, mockups and prototypes.

Please work on understanding the definitions and differences among:

  • sketches – hand drawn, quick, rough, low-fidelity
  • storyboards – series of sketches showing the user’s progression through interaction with a product
  • wireframes – computer drawn, pixel-perfect in terms of size; they show layout and functionality; medium-fidelity
  • mockups – computer drawn, pixel-perfect models of what the screen will look like. They include the visual design layer: color schemes, detailed icons, buttons, and typography; high-fidelity
  • prototypes – are interactive. They can be made out of sketches, wireframes or mockups. Or, they can be rough live codes of the product you envision. They vary in fidelity.

Read this article about wireframes and their importance, then look at the slide decks below that illustrate these definitions and differences.

There are many tools out there for wireframing and prototyping. In this class we will use Balsamiq and Axure, but I encourage you to try others as well – see a review of several tools from (yes, THAT Cooper). You might also want to bookmark this collection of wireframing resources I created a while back.

When you’re done, head back to Canvas and read the scholarly articles about how to evaluate the products of conceptual design.

Usability testing 101

Get a large overview of what usability testing is and how much it costs from this promotional video:

See how a very simple usability test (interview) can be conducted with paper prototypes. This can help you validate your initial concepts before even one line of code is written:

Then, read a bit on what a usability test is and how to plan it, as well as how to run it.

Check out how usability testing can be done online:

And see how it can be done with Morae, which is installed and running in Knoy 316A – and you should plan using it for your own usability tests for this class:

Now, head over and read the articles posted on Blackboard.




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.

Reading for Oct. 23 – Wireframe and prototype resources

Please read the book chapter on Bb and review these online resources before class and, instead of several reading worksheets, take notes that answer the following questions:

  • what is the difference between sketches, wireframes, mockups and prototypes?
  • what is the utility of each one of these? when are they used in the UCD process and why?
  • what are some useful tools for creating wireframes, mockups and prototypes?

Bring these notes to class, printed out, just like usual. You need only ONE set of reading notes for all the readings and resources.

  1. Blog post showing you the  process from wireframing on.
  2. Class blog post for CGT 256.
  3. Tools and resources for wireframes, mockups, and prototypes – reviews from Cooper, UX Movement, and UX Mag, and my collections for this class.

We have Axure in one of the labs in Knoy – 316B, I think – if not, it is 316A (316A confirmed) and you each will receive an invitation to create a Balsamiq account. You can also try Fluid UI and/or InVision for mobile apps. Most online wireframing tools have free account options.

(Opportunities for innovation are) Hidden in Plain Sight

I mentioned in class Jan Chipchase’s excellent book, Hidden in Plain Sight (read an excerpt and reviews here). Please consider following him on one or more social media accounts. Note how he uses Pinterest to organize observational data thematically.

The book explains this ethnographer’s approach to quickly understanding a new place’s culture and to looking around, while knowing what to focus on (e.g. wake up rituals, shopping, money transferring, behaviors at the limits of cultural acceptance) in order to get a quick grasp of the culture.

His approach helps us become better observers and learn to identify opportunities for innovation in everyday life.

I highly recommend the book, but I also highly recommend that you create the habit of observing closely and identifying such opportunities – you might even share them on your blog!


Brief history lesson

All we do today in digital UX is possible because graphical user interfaces (GUIs) exist. How did they evolve? Where did they come from? What are the major interface paradigms we know of (command line, WIMP, NUI, ????)? What does WIMP stand for? Please brush up on GUI history by reading this article.

The slides below help you identify major moments in GUI history and guide you through the article.

Also, please read this book excerpt on where UX comes from and be prepared to discuss in class.

If you are not following the UX Booth closely, you should – at least for the duration of this class.

Please review these resources (no need to fill out reading worksheets for them) in addition to your Blackboard readings.