Interaction design
Download
1 / 44

Interaction design - PowerPoint PPT Presentation


  • 155 Views
  • Uploaded on

Interaction design. IS 403: User Interface Design Shaun Kane. Today. More on interaction design Getting started with user testing. Check-in on A6. How is everybody doing? Problems? Need feedback? A7 posted. Interaction design.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Interaction design' - jered


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Interaction design
Interaction design

IS 403: User Interface Design

Shaun Kane


Today
Today

More on interaction design

Getting started with user testing


Check in on a6
Check-in on A6

How is everybody doing?

Problems? Need feedback?

A7posted


Interaction design1
Interaction design

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” – Steve Jobs


What makes a good design
What makes a good design?

  • What skills have we picked up so far?


What makes a good design1
What makes a good design?

Requirements gathering

Good information design and architecture (IS 387)

Good interaction design

Testing, iteration, improvement



Consider a web site
Consider a web site…

What questionsmight a user have?


Consider a web site1
Consider a web site…

What questionsmight a user have?

Where am I?

Where can I go?

What can I do here?

What did I just do?


Tools from is 387
Tools from IS 387

Site ID

Global / persistent navigation

“You are here”

Breadcrumbs


Site id
Site ID

The main site, brand identity

Click to go home


Global navigation
Global navigation

It should be persistent

5 elements


Utilities
Utilities

Site-wide elements that are not part of the content hierarchy

Separate them, so we don’t have to shoehorn them into content


You are here
“You are here”

Show user’s position in hierarchy

Helps user understand hierarchy

Can be shown in several ways


Breadcrumbs
Breadcrumbs

Hierarchical vs. chronological


Buttons and links
Buttons and links

Make them actions




The holy texts of usability1
The holy texts of usability

<- how

people think

tools, methods ->processes


Norman
Norman

  • You’ve probably read it before

  • Worth a reread

    • Now you have fun projects to apply it to


Important ideas from norman
Important ideas from Norman

It’s not the user’s fault

Affordances

Conceptual models

Make things visible (system status, feedback)

Feedback

Mapping

Constraints

Next time: execution and evaluating


Affordances
Affordances

Examples in everyday life/this class?


Affordances1
Affordances

Jared Sinclair, “Untouchtable”. http://blog.jaredsinclair.com/post/64880801326/untouchable


Perceived vs actual affordance
Perceived vs. actual affordance

Affords sitting

Affords pushing

Perceived affordance


Affordances vs convention
Affordances vs. convention

What does thisdo?


Affordances vs convention1
Affordances vs. convention

What does thisdo?

A cultural convention: blue underlined things are web links


Conceptual models
Conceptual models

How the system works vs. how the user thinks it works

Examples?



Conceptual models2
Conceptual models

Good conceptual models aren’t always the same as the system model


System status and feedback
System status and feedback

What’s going on?

What did I just do?



System status1
System status

Good?

Bad?


System status2
System status

  • Good?

  • - Tells me I need to wait

  • Bad?

  • Why?

  • How long?

  • What is it doing?



Mapping
Mapping

What is it?

What is a good mapping?



Mapping2
Mapping

Arbitrary mapping

Natural mapping


Constraints
Constraints

What are they?

Good/bad?



Don t do this
Don’t do this

Phone number:

Phone number MUST be formatted XXX-YYY-ZZZZ


Class activity
Class activity

  • Take out your phones (no really!)

  • In groups of two, find good and bad examples of:

    • Affordances, mapping, feedback, constraints


Next time
Next time

Norman, model of execution

Usability heuristics (Nielsen)


ad