UX & Usability Designing

Slide 1

Slide 1 text

UX & USABILITY DESIGNING - ABHAY RANA ([email protected])

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

INTERACTIVE DESIGN

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

YOUTUBE LEANBACK

Slide 7

Slide 7 text

http://www.youtube.com/leanback

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

MULTI-LEVEL MENUS

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

FLIPKART.COM

Slide 14

Slide 14 text

INDIAPLAZA.IN

Slide 15

Slide 15 text

INTERFACE ORIENTED DESIGNING Some examples of interfaces ?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

TOUCHABLE WEBSITES

Slide 18

Slide 18 text

COMMAND LINE ?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

DREAM WORTHY INTERFACES Avengers, 2012 - Warner Bros

Slide 22

Slide 22 text

GOOD INTERFACES What do they all have in common?

Slide 23

Slide 23 text

USER-CENTERED

Slide 24

Slide 24 text

EASILY LEARNABLE

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

AND THE GIST IS...

Slide 27

Slide 27 text

DON'T MAKE ME THINK

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

TABS

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

NAVIGATION HEIRARCHY Give your users an idea of what is important

Slide 32

Slide 32 text

EYE TRACKING

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

CALL TO ACTION

Slide 35

Slide 35 text

MORE CTA

Slide 36

Slide 36 text

DESIGN WORKFLOWS

Slide 37

Slide 37 text

SKETCHFLOW Go through every screen & its relation with other screens

Slide 38

Slide 38 text

MOCKUPS Sketches, Wireframes, Mockups, Pixels, Shots

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

DON'T MAKE ME THINK - STEVE KRUG

Slide 42

Slide 42 text

GUI BLOOPERS

Slide 43

Slide 43 text

LITTLE BIG DETAILS

Slide 44

Slide 44 text

USABILITY HELL

Slide 45

Slide 45 text

UX.STACKEXCHANGE

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

QUESTIONS?

Slide 48

Slide 48 text

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