Transcript Interface development methods

Interface Design
Work Top Down:
• General Structure
• Navigation
• Page Design
• Media Elements
Interface Design
Step 1: Information ?
influences the structure
The way that the content is distributed should
depend on the audience
dogs
cats
rabbits
Interface Design
Mental models :
Consider the way the user
group link meanings:
User Participation
Interface Design
Interface for earlier system for the
passive health monitoring and
communications, structured around his
understanding
Interface Design
On line tools to help decide the structure of information
can be shared with users or other participants
How do they find information, under what categories:
www.optimalworkshop.com/optimalsort
Interface Design
Information design : where can information be found
among the pages?
Overall Structure
For apps and web sites, starts with a Site Map
Interface Design
Navigation systems
• 3 Clicks.
find what they want within 3 clicks. Balanced
against how much scrolling is needed.
• 7 choices
Its hard to distinguish between more than
seven different options
Interface Design
Page Design follows after
structure decided, not before :
Remember Graphic design
principles:
•
•
•
•
Keep things simple, avoid clutter
Line things up
Use a grid
Keep it unified and use similar shapes
and forms and limited colours
Interface Design
Design of Media elements
follows page design
The smallest element of a screen can affect its
success.
Text vs. image : keep a balance
Interface Design
Text, keep to a minimum, use different punctuation
styles.
Chunking: Font types and sizes,
Interface Design
1: Process: Refine
Function:
User Journeys from Personas &
Scenarios
Interface Design
Step 1: User Journeys with post its
Interface Design
Step 1: User Journeys
A good way to test the tasks decided
on is to role play them
Act them out!
https://www.youtube.com/watch?v=h
kAFdIrTR00
Seductive Interaction Design:
Stephen P. Anderson
Interface Design
Prototyping ideas
Process:
•
Paper prototyping
•
Create wireframes
•
On line ways to test ideas
Interface Design
Prototyping ideas
•
Paper prototyping
Interface Design
Prototyping ideas
•
•
•
Create wireframes: Use Balsamiq
https://balsamiq.com
https://www.youtube.com/watch
?feature=player_embedded&v=7
WQ2Zh5euLk
Interface Design
Prototyping ideas on line for your
assessment: demonstrate your interaction
https://www.invisionapp.com
• key interactions using: Balsamiq wireframes, followed by
Illustrator/Photoshop for more finished testing
• Send the link to others or work with other people
Interface Design
Prototyping more ‘finished’ web based
ideas, with html, not necessary for
product interfaces
•
•
Web or html : Using Axure (more complex)
Others: http://mashable.com/2013/04/02/wireframing-toolsmobile/
Interface Design
For inspiration:
Bill Moggridge, founder of IDEO
and created the first laptop
https://www.youtube.com/watc
h?v=kVkQYvN4_HA
Interface Design
Cathy’s website:
www.visable.org.uk
You could have
your work added!
Semiotics