User interfaces

Team project: user interface design and usability testing

Study the lecture presentations

UserExperience.pdf

UsabilityTesting.pdf

Task

Build an application wireframe/ prototype in a team. Try to design a good user interface on the basis of usability principles and psychology that you have just learnt. Select an interactive application for the user interface design, for example

• a mobile application that guides you in the Leppävaara campus, showing how to go to certain locations such as cafeteria, Big Dry auditorium, find toilets, etc. The application should be useful for wheelchair users, as well.
• an interactive application with a procedural flow that would i.e. give advice or guide in some process such as finding a parking space near Leppävaara campus. Or consider an extension to the HSL Route Planner where you could give preferences for means of transport, route preferences (stopping at a mall, avoiding outdoors in rainy days, etc.).

The user interface design can be partly done as "paper" drafts and graphs, and partly as prototype screens with certain interactive features implemented. Familiarize yourself with the Google Design Material guidelines, and apply them as appropriate.

Wireframing tutorial and examples.

Tools and resources:

• Pencil GUI tool
• Sketchflow in Expression Blend
• The UIEngineering site has good design tips for form layout, for instance: http://www.uie.com/articles/web_forms/.
• Free mock-up tool: Balsamiq.
• Another mock-up tool: Gomockingbird.
• Another tool: Axure.
• HTML5 based tool Moqups .
• Wireframing with HTML5 is explained here.
• Design guidelines for Android applications
• UI patterns for web design, a collection: - contains model designs but also discussion on pros and cons of different alternatives
• a list of good tools for different design purposes

The interface could be of experimental nature, and you can try your wildest ideas on it.

When you have completed a design prototype that can be tested, perform usability testing and make an evaluation of results. You will need test subjects that you recruit among other teams.

There are several resources online that provide check-lists and processes for usability testing, for example

• Usability and User Experience Community of the Society for Technical Communication http://www.stcsig.org/usability/ site choosing the Usability toolkit at http://www.stcsig.org/usability/resources/toolkit/toolkit.html
  
  
• or from the EU sponsored usability site by choosing the Methods table and from there Evaluate prototype or Diagnostic evaluation.

The teams hand in

1. their application user interface design
2. with a documentation and
3. a report on the usability test and evaluation of its results.

Software documentation usually includes:

• Site structure and code.
• User interface standards and guidelines
• System architecture (if needed)
• Software components (if needed)

The report should include an explanation of design principles and rules that were applied. However, you do not need to create project documentation as such, but to describe solutions that you have developed and give justification of your choices.

Created by: Jaana Holvikivi Last update: 18.3.2016