Cs 4963 ui design
Download
1 / 37

CS 4963: UI Design - PowerPoint PPT Presentation


  • 152 Views
  • Uploaded on

CS 4963: UI Design. Interaction Design, Part 1. Today:. What is Interaction Design, anyways? How do we do interaction design? Fundamentals and Building Blocks Heuristics and Patterns Next Interaction Design lesson: Deliverables Documentation.

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 ' CS 4963: UI Design' - keaira


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
Cs 4963 ui design

CS 4963: UI Design

Interaction Design, Part 1


Today
Today:

  • What is Interaction Design, anyways?

  • How do we do interaction design?

    • Fundamentals and Building Blocks

    • Heuristics and Patterns

  • Next Interaction Design lesson:

    • Deliverables

    • Documentation


Interaction design association ixda

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.”

—Interaction Design Association (IxDA)


Pabini gabriel petit uxmatters com

Interaction design defines workflows that support users’ goals and tasks, the affordances through which digital products and services communicate their functionality and interactivity to users, the ways in which users can interact with those affordances, products’ behaviors in response to user interactions, and the methods by which products indicate state changes. Good interaction design facilitates people’s tasks and ensures that digital products are both learnable and usable by reducing complexity as much as possible, preventing user error, adhering to standards when appropriate, and through consistency across an entire product or product line. Typical interaction design deliverables include specifications, wireframes, usage scenarios, and prototypes.”

—Pabini Gabriel-PetitUXMatters.com


Pabini gabriel petit

Interaction design defines workflows that support users’ goals and tasks, the affordances through which digital products and services communicate their functionality and interactivity to users, the ways in which users can interact with those affordances, products’ behaviors in response to user interactions, and the methods by which products indicate state changes. Good interaction design facilitates people’s tasks and ensures that digital products are both learnable and usable by reducing complexity as much as possible, preventing user error, adhering to standards when appropriate, and through consistency across an entire product or product line. Typical interaction design deliverables include specifications, wireframes, usage scenarios, and prototypes.”

…call and response.

—Pabini Gabriel-Petit


Call and response
Call and response.

(YOU)

from http://www.flickr.com/photos/anirudhkoul/2045497777/


Call and response1
Call and response.

Sing it!

WHOOOOOA!!

WHOOOOOA!!

from http://www.flickr.com/photos/anirudhkoul/2045497777/


Call and response2
Call and response.

We love you!

Encore!

AAAAH! FIRE!!! THE DRUMMER’S HAIR IS ON FIRE!

Freebird! FREEEBIRD!

Yeah!!We’ll play another song as soon as I extinguish the drummer.

from http://www.flickr.com/photos/anirudhkoul/2045497777/


Bill verplank helped develop xerox star establish idii

“Interaction is acting on the world and receiving feedback from the world.” Interaction design is defining how do you [as a user]…- do? Affordances?- feel? Interactivity?- know? Mental models?

from designinginteractions.com

—Bill Verplank(helped develop Xerox Star, establish IDII)


How is ixd done
How is from the world.” IxD done?

  • Building blocks

    • Affordances (and common controls)

    • States (and Transitions …context!)

    • Feedback (Behavior)

  • Heuristics

    • General approaches

    • Human-Computer Interaction methods

    • Interaction Design Patterns


Building blocks
Building blocks from the world.”


Affordances
Affordances from the world.”

from http://www.flickr.com/photos/smig44/2690249520/

from http://www.flickr.com/photos/arrrika/315335846/

Affordances + Constraints => Mappings


Common controls
Common Controls from the world.”

from http://www.flickr.com/photos/brook/5259347/

from http://www.flickr.com/photos/tonyjcase/2759363747/

?


Feedback
Feedback from the world.”

vs.

from

http://www.flickr.com/photos/rachelfordjames/2397592716/

from http://www.flickr.com/photos/24thcentury/2381462463/


States
States from the world.”

  • You’re CS students. You know what states are.

  • Help your user know what state the system is in

  • Helps with mental map

  • Prevents mistakes

from http://www.flickr.com/photos/tonyjcase/2375636885/


Bill buxton microsoft research

from the world.” Experience is a temporal phenomenon. ... You need to have as much detail in the transitions as in the states, otherwise you’re going to get it wrong.”

—Bill BuxtonMicrosoft Research


Transitions
Transitions! from the world.”

???

(these are the same animal?!?)

from http://www.flickr.com/photos/ultimorollo/sets/72157615748412640/


State transition revisited
State transition revisited from the world.”


General heuristics
General heuristics from the world.”


Make it easy to recover
Make it easy to recover. from the world.”

  • First, do no harm!

  • General rule:

  • If it’s something that’s not undoable—a destructive action—, warn.


Be consistent
Be consistent. from the world.”

  • Make common things behave in the same way

  • Make behavior predictable

from http://www.youtube.com/watch?v=yUSIpRo13ocOn Android phones, the long press always brings up a context menu (or at least, it should).


Consider the locus of attention
Consider the locus from the world.” of attention.

  • Where possible, put actions for the task at hand at the locus of attention, put other things at the periphery.

from Flickr: edit action is right there.

Remember this, from slide 18?


Be conversational
Be conversational. from the world.”

  • People like it.

from Google Search

from Google Reader

from GMail


Level of interaction
Level of interaction? from the world.”

  • Some things you want to be interactive, some you don’t.

  • Many times, the user just wants to get to Point B

from http://www.worrydream.com/MagicInk/(Note that the UI on the right takes less clicks AND makes more information visible.)


Don t annoy
Don’t annoy. from the world.”

Hey, do you want to allow this app to run as administrator? I know you said yes the last 20 times, but…

Have I told you about this great deal on SPAM? Earn points!

ARE YOU REEEALLY SURE YOU WANT TO SAVE THIS FILE? REALLY??

Beep! Beep! BEEEEEEEP!

JUST LET ME SING FERGOODNESSSAKES

from http://www.flickr.com/photos/anirudhkoul/2045497777/


Surface simplicity hide complexity
Surface simplicity, hide complexity. from the world.”

  • More choices make people …unhappier?


Human computer interaction

(There is a whole course on this, yes.) from the world.”

Human-Computer Interaction


Hick s law

Remember this from slide 14? from the world.”

Hick’s Law

  • More choices visible? Faster...

Time (in msec) = a + b log (n+1)

  • 2


Fitts law
Fitts from the world.” ’ Law!

  • Larger targets, targets on screen edges are easier to hit

D

S

Time (in msec) = a + b log (D / S + 1)

  • 2


Goms keystroke level model
GOMS Keystroke-Level Model from the world.”

  • Way to measure efficiency of an interface

Example: MKKKKKKKMHPK = 1.35 + 0.2*7 + 1.35 + 0.4 + 1.1 + 0.2 = 13.9 sec


Human interface guidelines
Human Interface Guidelines from the world.”

  • On top of all this, everyone has their own HIGs and UIGuidelines

  • (Helps with consistency)


Interaction design patterns

Not just for breakfast anymore. from the world.”

Interaction design patterns


Patterns
Patterns from the world.”

  • People have done this before

  • Codified best practices

from Chris Messina’s Flickr collection linked in the notes of this slide


Summary
Summary from the world.”

  • Interaction design is crafting the behavior of your software/app/system.

  • It’s call-and-response, feedback to action.

  • Affordances, constraints, mental models…

  • …and designing the transitions between states.

  • There are general rules, design patterns, and HCI methods that can help.


To be continued
TO BE CONTINUED… from the world.”


For next time
For next time… from the world.”

  • Take your first assignment’s BAD design, and make two sketches (plus paragraph each) for how you might make it work better (better affordances, improved feedback, clearer state transitions).

    For the first, keep the same hardware/controls, but relabel/change the interaction as needed. For the second, you can change anything.

    2. Readings for next lesson: on the class blog.


Contact us
Contact Us from the world.”

Matthias Shapiro

[email protected]

Jason Alderman

[email protected]

http://huah.net/cs4963


ad