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.

UI/UX Learning: From Discovery to Design

197 views

Published on

A talk on the UX Process from Discovery to Design
Event: The Behance Portfolio Review, Kolkata (https://bit.ly/2HEWzfS)

Talk Video available on:
Discovery Phase: https://youtu.be/rAebyPoHHdw
Design Phase: https://youtu.be/jM4j7VPLni0

Published in: Design
  • Be the first to comment

  • Be the first to like this

UI/UX Learning: From Discovery to Design

  1. 1. UI/ UX LEARNINGS From Discovery to Design
  2. 2. • 3rd GenerationIndianChinese • Self TaughtUX Designer • Workingin QuantumInventions • Impulsive HoarderofIdeas! ABOUT ME
  3. 3. • Discovery • Design • Deployment WHAT I WILL BE COVERING
  4. 4. • Discovery of THE QUESTION • Discovery of THE SOLUTIONDISCOVERY Icon Created by Gregor Cresnar from the Noun Project
  5. 5. Discovery of the Problem “neversolvetheproblemIamaskedto solve” TheDesignofEverydayThings DonNorman
  6. 6. • From collected existing Knowledge • Research into a new unknown Domain Discovery of THE SOLUTION
  7. 7. RSSFeed FEEDLY Keeping yourself Updated Collected existing Knowledge
  8. 8. • PinBoard • Evernote • Pinterest • Pocket Collecting for FutureUse Collected existing Knowledge
  9. 9. • PinBoard • Evernote • Pinterest • Pocket Collecting for FutureUse Collected existing Knowledge
  10. 10. • PinBoard • Evernote • Pinterest • Pocket Collecting for FutureUse Collected existing Knowledge
  11. 11. Collecting for FutureUse Collected existing Knowledge • PinBoard • Evernote • Pinterest • Pocket
  12. 12. Automotive UX Source:tesla.com A Case Study Researchintoanew unknown Domain
  13. 13. Whatmade me seriously thinkaboutit? This article… A Case Study Researchintoanew unknown Domain
  14. 14. Whatmademeseriously thinkabout it? This article… A Case Study Researchintoanew unknown Domain
  15. 15. • AnEvaluationofTypefaceDesignina Text-RichAutomotiveUserInterface • Slideshare: CarUI DesignandSafety- SlippyUX • ISODocument:Roadvehicles--Ergonomicaspectsoftransportinformationandcontrolsystems-- Specificationsandtestproceduresforin-vehiclevisualpresentation Few Insights I found… A Case Study Researchintoanew unknown Domain
  16. 16. • Where toFind? – Google – Youtube – SlideShare – Slack: https://userexperiencedesign.slack.com/ Topic_automotive – https://ux.stackexchange.com/ – Online Groups: LinkeIn Groups / Slack / Facebook • What toFind? – UsetheRight Terminology • How toFind? – Follow theScent Lesson on Research A Case Study Researchintoanew unknown Domain
  17. 17. • Persuasive Design • FittsLaw • Anti Affordance DESIGN Icon Created by Gregor Cresnar from the Noun Project
  18. 18. Whatis it? Persuasivedesign is an area ofdesignpracticethatfocuseson influencing humanbehavior through aproduct’s or service’s characteristics interaction-design.org PersuasiveDesign
  19. 19. SlideShare: Persuasive Design or The Fine Art of Separating People from Their Bad Behaviours - Online REALWORLD EXAMPLESPersuasiveDesign
  20. 20. DIGITALWORLDEXAMPLESPersuasiveDesign
  21. 21. A Quick Exercise Fitts Law
  22. 22. Whatis it? Fittslaw predicts thatthe time required torapidlymovetoa target area isa function ofthe ratiobetweenthedistancetothe targetand thewidthofthetarget Wikipedia.org Fitts Law
  23. 23. Radial Menu DIGITALWORLDEXAMPLESFittsLaw LabeledOptions
  24. 24. DIGITALWORLDEXAMPLESFittsLaw Android Menu Drawer
  25. 25. Photoshop OldToolbar DIGITALWORLDEXAMPLESFittsLaw Photoshop NewToolbar
  26. 26. But firstwhat isAffordance? theperceived or actual properties ofthething,primarily those fundamentalpropertiesthatdeterminejust howthethingcould possiblybe used… The Design of Everyday Things Don Norman Anti Affordance
  27. 27. Sowhatis Anti-Affordancethen? When designingsomething,itis as importanttoprevent misuseas it istoencourage the correct use.This is done withanti-affordances www.muffin.works Anti Affordance
  28. 28. Camden Bench www.muffin.works REALWORLD EXAMPLESAnti-Affordance Drilling Machine CordlessSIM Phone
  29. 29. DIGITALWORLDEXAMPLESAnti-Affordance Apple HomeScreen Android GalleryScreen
  30. 30. DIGITALWORLDEXAMPLESAnti-Affordance Quick Mic ConnectedScreen Form Builder
  31. 31. • Store Upload • App Asset DEPLOYMENT Icon Created by Danil Polshin from the Noun Project
  32. 32. App Store Splash Screens Store Upload
  33. 33. App Store Splash Screens Store Upload
  34. 34. Linked Smart Objects Further Reading: helpx.adobe.com : Generate image assets from layers TechniqueUsedStoreUpload
  35. 35. Adobe Image Generator Further Reading: helpx.adobe.com : Generate image assets from layers TechniqueUsedStoreUpload Syntax iOS/splash.png, 200% iOS/splash@2x.png
  36. 36. App Assets Generation App AssetsGeneration
  37. 37. Adobe Image Generator Further Reading: helpx.adobe.com : Generate image assets from layers TechniqueUsedAppAsset Generation Syntax Default iOS/ + 200% iOS/@2x + 300% iOS/@3x + Android/mdpi/ + 150% Android/hdpi/ + 200% Android/xdpi/….
  38. 38. Few thingsI can beofhelp with… • HFI-CUA Course • Online Resources • Books Q&A
  39. 39. • Linked In: linkedin.com/in/robbyhsu/ • E-mail: robert.hsu@gmail.com • Pinterest: in.pinterest.com/robbyhsu/ LET’S CONNECT!
  40. 40. THANKYOU!

×