Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The design part of interaction design


Published on

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.

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

The design part of interaction design

  2. 2. InteractionDesignNot one wayNot one wayNot one way
  3. 3. ArtCopy
  4. 4. ReturnReturn RelyRelyShareShareNoticeNotice
  5. 5. How do they benefit?Make it worthreadingWhat does theuser want toknow?Focus on introducingyour product /companyNoticeNoticeDon’t deny youhave competitorsBe honestSearchengine/keywords
  6. 6. Tap into shared emotionFocus on youraudiences mindsetKeep headingscatchyBe timely andregularMake it deadsimple.ShareShare5 ways, 10 ways,LOL, OMG
  7. 7. ReturnReturnContent platform Different experiences forfirst and later visitsBuild incentives forthem to returnHelp userscustomize theirexperienceIntroduce andpromote arelationshipRecognize andreward loyaltyFirst-time designchoices shouldn’tcripple repeats
  8. 8. Focus on learnabilityrather than first timeobviousnessOwn the approachDon’t hide fromyour usersPlan for chaosProduct mustgrow with usersexperienceLet them knowyou recognizethemRelyRelyBe mobileInstagram
  9. 9. Re-DesignDesign
  10. 10. Emphasis
  11. 11. ColorScreenAlignmentFontFontFontFont
  12. 12. 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.
  13. 13. QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  14. 14. 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
  15. 15. QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  16. 16. Fingers Focus
  17. 17. 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.
  18. 18. WarmCool
  19. 19. 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)
  20. 20. Skeumorphic
  21. 21. QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  22. 22. 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
  23. 23. 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.
  24. 24. QuickTime™ and aJVT/AVC Coding decompressorare needed to see this picture.
  25. 25. 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
  26. 26. 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.
  27. 27. 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.