The design part of interaction design
Upcoming SlideShare
Loading in...5
×
 

The design part of interaction design

on

  • 213 views

From a recent lecture, here are the basics of what design means to the User Experience. This is hardly exhaustive, but a good primer on some of the essential elements. Some buzzwords include: ...

From a recent lecture, here are the basics of what design means to the User Experience. This is hardly exhaustive, but a good primer on some of the essential elements. Some buzzwords include: Skeumorphism, Flat, Gestalt, Typography – all the tools an interface designer needs to connect emotionally to an audience.

Statistics

Views

Total Views
213
Views on SlideShare
191
Embed Views
22

Actions

Likes
0
Downloads
1,947
Comments
0

1 Embed 22

http://michaeldain.com 22

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Utility can come first
  • Design is dependent on technologies and sometimes leads
  • Icons, mystery meat?
  • Images used but not just clickable

The design part of interaction design The design part of interaction design Presentation Transcript

  • INTERFACEDESIGNDESIGNDESIGNDESIGN
  • InteractionDesignNot one wayNot one wayNot one way
  • ArtCopy
  • ReturnReturn RelyRelyShareShareNoticeNotice
  • How do they benefit?Make it worthreadingWhat does theuser want toknow?Focus on introducingyour product /companyNoticeNoticeDon’t deny youhave competitorsBe honestSearchengine/keywords
  • Tap into shared emotionFocus on youraudiences mindsetKeep headingscatchyBe timely andregularMake it deadsimple.ShareShare5 ways, 10 ways,LOL, OMG
  • ReturnReturnContent platform Different experiences forfirst and later visitsBuild incentives forthem to returnHelp userscustomize theirexperienceIntroduce andpromote arelationshipRecognize andreward loyaltyFirst-time designchoices shouldn’tcripple repeats
  • Focus on learnabilityrather than first timeobviousnessOwn the approachDon’t hide fromyour usersPlan for chaosProduct mustgrow with usersexperienceLet them knowyou recognizethemRelyRelyBe mobileInstagram
  • Re-DesignDesign
  • Emphasis
  • ColorScreenAlignmentFontFontFontFont
  • ColorAvoid it, or use sparingly.Make body text off black and page background slightly off white.Links should be blue only if they are in a paragraph.Use colors or underlines in hover states, turn off defaultunderlining.Headers and sidebar navigation, though clickable, need not beblue.Use gray whenever possible to change emphasis rather thancolor.
  • QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  • ScreenScreen widths and heights vary from device todevice.Consider modular content for responsive design.Try to avoid ‘filling the screen’ but put as muchvalue as you can on one screenAvoid scrolling to different types of content, scrollshould be ‘more of the same’Beware of Below the fold
  • QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  • Fingers Focus
  • TypeEmphasis doesn’t scale well, white space is better.Readability is enhanced by narrow columns of text.Try gray over colorAvoid using more than one font. Use variations instead(size, color).Avoid bolding text, especially headers at large fontsizes.Give text more space (line-height) and padding.
  • WarmCool
  • ImagesMake them clickable, or make them really big.If an image is not clickable or big, rethink why it ispart of the design taking attention away fromsomething actionable.Icons should only be used to differentiate one textline from another. Try not to use icons fornavigation (mystery meat rule)
  • Skeumorphic
  • QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  • GroupingUse alignment to indicate similarity. Avoid lines, bullets,backgrounds or colors to reiterate similarity.Repetition of elements from one page view to another isvital to reinforcing importance of elements andintroducing new ones.HTML is great at enforcing semantic similarity, as well asvisual. Avoid exceptions that break a rule or classes thatchange visual display on the same tag
  • InputAvoid correcting or pointing out error using red or other scolding color.Use online help or tooltips to check each entry one by one.Dont assume in a dropdown list that alphabetical is the ideal sort.Assume that questions that are meaningful to the business problemmay require an example.Indicate what the information will be used for.Never use a cancel button.Align right all submit buttons.
  • QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  • Task AnalysisGroup 1 observersSet up prototype, get ready to write notesGroup 2 participants will use prototypeAccomplish task one, take your timeIf successful, then task twoSwitch afterwards
  • ParticipantsDescribe aloud what you are doing and why.Encourage to talk aloudIf you can accomplish the task, good, if not,describe it.Describe typing, describe what you would doafterwards.
  • P3 20 POINTS10 Preparing your prototype for real testing and postingyour tasks to the Lore site before class.5 Testing your prototype in class.5 Written assessment of your prototype. Include quotesand observations from testing. Assess where did peoplehave difficulty, what is needed to make the interface workbetter for the intended use. Name a heuristic or two thatwould help your interface to improve. To be completed bySaturday night.