SLIDE 1 Introduction to Human Computer Interaction
Course on NPTEL, Spring 2018
Week 6.1
Ponnurangam Kumaraguru (“PK”)
Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ fb/ponnurangam.kumaraguru, @ponguru
1
SLIDE 2 Core Idea of Design Patterns
- Adapting a good design solution from one or more
existing designs
www.cs.cmu.edu/~jasonh/publications/chi2002-Workshop-Patterns.pd f
SLIDE 3
1
SLIDE 4
– Logo in top-left corner denotes the site – Another logo at top-right to reinforce – Examples of SITE BRANDING (E1) 1
SLIDE 5
- What kind of site is this?
– Shopping cart icon – Tab row content & categories on left – Prices in content area
– UP-FRONT VALUE PROPOSITION (C2)
– Examples of PERSONAL E-COMMERCE (A1) 1
SLIDE 6
– Welcome for new visitors – Tab row / Search on top – “Categories” – Prices – Examples of OBVIOUS LINKS (K10) 1
SLIDE 7
- Most important info visible
without scrolling
1
SLIDE 8
2
SLIDE 9
– Logo in upper-left reinforces brand, can click to go to home – Same font, layout, color scheme also reinforces – examples of SITE BRANDING (E1) 2
SLIDE 10
– “Home > Music” are LOCATION
BREAD CRUMBS (K6) – TAB ROW (K3) says “Music”
– Album cover, “Product Highlights”, and CD cover 2
SLIDE 11
- Can I trust these sellers?
– Who am I buying from? – Are they reputable? – What about shipping? 2
SLIDE 12
– Hmm, what’s below here? 2
SLIDE 13
- Impulse buy
- PESONALIZED RECOMMENDATIONS
(G3)
- About this album
- Lots of unused space
- Still more info below…
2
SLIDE 14
- Is this product any good?
– Editorial reviews – Customer reviews
– RECOMMENDATION COMMUNITY (G4)
2
SLIDE 15
3
SLIDE 16
– Logo in upper-left – Colors, layout, font – Examples of SITE BRANDING (E1) 3
SLIDE 17
– Last link clicked was “Buy!” – “Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page”
– SHOPPING CART (F3)
3
SLIDE 18
– Possibly a pleasant surprise – Impulse buy
– CROSS-SELLING & UP-SELLING (G2)
3
SLIDE 19
– Easy to remove – Easy to move to wishlist
– Shipping costs there, no nasty surprises
3
SLIDE 20
– “Proceed to Checkout” HIGH
VISIBILITY ACTION BUTTON (K5)
– Visually distinct – 3D, looks clickable – Repeated above and below the fold 3
SLIDE 21
4
SLIDE 22
- What if I don’t have a User
ID?
password?
4
SLIDE 23
Advantages
❑Quickly prototype ❑Readily available designs ❑Users are tuned into the designs
SLIDE 24
Dis-advantages
❑Curtails creativity ❑New designs may disturb users / bored with the same designs
SLIDE 25
Reviewing 4 websites!
❑Amazon ❑Flipkart ❑Snapdeal ❑Facebook ❑Twitter ❑YouTube ❑TimesofIndia ❑Washingtonpost
SLIDE 26
IDEO Video
SLIDE 27
IDEO Video
❑Empathy ❑Fail fast ❑Process is the key not the problem or final outcome ❑Nobody is a subject matter expert ❑Learn it from real users ❑Diverse group members help
SLIDE 28
Sketching & prototyping Video
SLIDE 29
Sketching & prototyping Video
❑Empathy ❑Even Google starts with paper prototype ❑Simple drawing on a paper / post-it ❑Used in any stage of designing ❑Wireframe ❑More flesh out in paper will help the digital one ❑Visualize elevation in prototyping ❑Simulate interactions ❑Record the interactions and share ideas
SLIDE 30
Digital prototyping Video
SLIDE 31
Digital prototyping Video
❑No coding is necessary ❑Building models like architects create ❑Users get the feel of final product ❑Principle <-> Sketch ❑Features in principle. Transitions are made easy ❑Form tool
SLIDE 32
Native prototyping Video
❑https://www.youtube.com/watch?v=lusOgox4xMI&t=342s
SLIDE 33
Native prototyping Video
❑Writing code ❑Explore with technology ❑Extension of design / Code is the new playground ❑Laptop, Ipad, Phone, Watch, VR ❑Use prototype to tell the stories / ideas ❑Compelling story with data that you have
SLIDE 34 Ponnurangam Kumaraguru (“PK”) Associate Professor Indraprastha Institute of Information Technology New Delhi – 110078 pk@iiitd.ac.in precog.iiitd.edu.in
