Log on to edit
Wiki
Human computer interaction

Lectures 5 & 6
Assignment 3
Lectures 3 & 4
Project presentation 3
Assignment 1
Assignment 2
Lectures 1 & 2
Project usability test
Lectures 9 & 10
Project presentation 1
Project presentation 2
Lectures 5 & 6
Page last edited by Michael Kai Petersen (mkai) 15/10-2012

Learning objectives (Specific)

  • Conceptualize interaction based on design patterns
  • Optimize UI elements based on cognitive constraints

Lecture:

Organizing the "nouns" within the screen; layout of elements and gestalt principles

  • visual hierarchy, flow and feature integration
  • gestalt principles of proximity, similarity, continuity and closure
  • neurosemantics of objects in the brain

Apply patterns to design forms for getting input from users when e.g. purchasing something or entering data to log in based on Neil's "Mobile design pattern gallery", Chapter 2: Forms

  • sign-in
  • registration
  • check-out
  • calculate
  • search criteria
  • multi-step
  • long form

and make sure to focus only on the most important information when displaying collections of items by selecting design patterns from Neil's "Mobile design pattern gallery", Chapter 3: Tables & Lists.

  • basic table
  • headerless
  • fixed column
  • overview plus data
  • grouped rows
  • cascading lists
  • visual indicators
  • editable table

 

Group work related to Assignment 1:

Design a DTU smartphone app integrating existing social media for study & group work

 

Monday:

  • sketch out a visual framework for your app
  • outline the various gestalt principles which are reflected in your design

Thursday:

  • conceptualize how your use cases are translated into sequences of actions
  • relate the sequences of actions to design patterns for organizing content

Slides

Prezi

 

Additional material

iOS human interface guidelines

WindowsPhone7 - plain & simple

Links

BBC prototype interface design: content, live tab, tabs, related content, save favorites
Support: +45 45 25 74 43