UX & Usability Designing

A short, quick lecture on an introduction to UX, and how to approach UX problems. Delivered in a small talk at SDSLabs, IIT-Roorkee. Made using reveal.js.

Transcript

1. UX & USABILITY
   DESIGNING
   - ABHAY RANA (ME@CAPTNEMO.IN)
   

   View Slide

2. TYPES OF DESIGNING
   INFORMATIONAL DESIGN
   Posters
   Notices
   Content Websites
   INTERACTIVE DESIGN
   User-oriented
   Interactive
   

   View Slide

3. INFORMATIONAL DESIGN
   http://www.flickr.com/photos/ell-r-brown/5308119110/sizes/m/
   

   View Slide

4. INTERACTIVE DESIGN
   

   View Slide

5. https://plus.google.com/hangouts/
   

   View Slide

6. YOUTUBE LEANBACK
   

   View Slide

7. http://www.youtube.com/leanback
   

   View Slide

8. POSTBOX APP
   http://www.postbox-inc.com/
   WHY DO WE NEED THIS?
   

   View Slide

9. View Slide

10. Amazon circa 2001, 2003, 2005, 2007, 2011 via archive.org
    

    View Slide

11. MULTI-LEVEL MENUS
    

    View Slide

12. View Slide

13. FLIPKART.COM
    

    View Slide

14. INDIAPLAZA.IN
    

    View Slide

15. INTERFACE ORIENTED DESIGNING
    Some examples of interfaces ?
    

    View Slide

16. TOUCH BASED INTERFACES
    http://itunes.apple.com/gb/app/dvd-profiler-for-ios/id408455612?mt=8
    

    View Slide

17. TOUCHABLE WEBSITES
    

    View Slide

18. COMMAND LINE ?
    

    View Slide

19. VOICE ACTIVATED
    http://goo.gl/4vFql
    

    View Slide

20. GESTURE BASED
    http://gamerant.com/microsoft-kinect-reviews-guide-benk-51320/
    

    View Slide

21. DREAM WORTHY INTERFACES
    Avengers, 2012 - Warner Bros
    

    View Slide

22. GOOD INTERFACES
    What do they all have in common?
    

    View Slide

23. USER-CENTERED
    

    View Slide

24. EASILY LEARNABLE
    

    View Slide

25. FITS IN THE ENVIRONMENT
    Angry Birds in Windows
    Dreamweaver in iPhones
    Windows on a DJ Set
    Temple Run using your Mouse
    Using Mouse to control a robot
    

    View Slide

26. AND THE GIST IS...
    

    View Slide

27. DON'T MAKE
    ME THINK
    

    View Slide

28. DESIGN PARADIGMS
    DON'T MAKE ME LEARN
    Use existing design ideas
    Don't re-invent the wheel
    Design to learn quickly
    Minimum Effort
    Users are Lazy
    

    View Slide

29. TABS
    

    View Slide

30. SENSIBLE DEFAULTS
    Examples:
    Choose default country
    Choose most-used price range
    Show popular content
    Reduce Design induced Frustration
    

    View Slide

31. NAVIGATION HEIRARCHY
    Give your users an idea of what is important
    

    View Slide

32. EYE TRACKING
    

    View Slide

33. USING ICONS
    Bad Icons:
    Fine Icons/Buttons:
    More Bad Icons:
    Good:
    

    View Slide

34. CALL TO ACTION
    

    View Slide

35. MORE CTA
    

    View Slide

36. DESIGN WORKFLOWS
    

    View Slide

37. SKETCHFLOW
    Go through every screen & its relation with other screens
    

    View Slide

38. MOCKUPS
    Sketches, Wireframes, Mockups, Pixels, Shots
    

    View Slide

39. THINK OVER EVERY INTERACTION
    Is this the easiest, most obvious interaction that the user would choose?
    Can I offer an alternative to this interaction?
    Don't miss out the power users
    Don't try to do everything, do ONE THING WELL
    

    View Slide

40. REFERENCES
    This is just a small sample of what is out there in the web
    DOING>
    LEARNING>
    READING
    

    View Slide

41. DON'T MAKE ME THINK - STEVE KRUG
    

    View Slide

42. GUI BLOOPERS
    

    View Slide

43. LITTLE BIG DETAILS
    

    View Slide

44. USABILITY HELL
    

    View Slide

45. UX.STACKEXCHANGE
    

    View Slide

46. View Slide

47. QUESTIONS?
    

    View Slide

48. THINK
    ABOUT HOW WOULD YOU IMPROVE
    A coffee machine
    A power socket
    google.com
    muzi
    anything really...
    

    View Slide

49. THANKS
    

    View Slide

50. View Slide