![Page 1: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/1.jpg)
Introduction to Human Computer Interaction
Course on NPTEL, Spring 2018Week 6.1
Ponnurangam Kumaraguru (“PK”)Associate Professor
ACM Distinguished & TEDx SpeakerLinkedin/in/ponguru/
fb/ponnurangam.kumaraguru, @ponguru 1
![Page 2: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/2.jpg)
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.pdf
![Page 3: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/3.jpg)
1
![Page 4: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/4.jpg)
• What site is this?– Logo in top-left corner denotes the site– Another logo at top-right to reinforce– Examples of SITE BRANDING (E1)
1
![Page 5: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/5.jpg)
• 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
![Page 6: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/6.jpg)
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– Examples of OBVIOUS LINKS (K10)
1
![Page 7: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/7.jpg)
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
1
![Page 8: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/8.jpg)
2
![Page 9: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/9.jpg)
• What site am I at?– 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
![Page 10: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/10.jpg)
• Where am I in the site?– “Home > Music” are LOCATION
BREAD CRUMBS (K6)
– TAB ROW (K3) says “Music”– Album cover, “Product
Highlights”, and CD cover
2
![Page 11: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/11.jpg)
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
2
![Page 12: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/12.jpg)
• The Fold– Hmm, what’s below here?
2
![Page 13: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/13.jpg)
• Impulse buy• PESONALIZED RECOMMENDATIONS
(G3)
• About this album• Lots of unused space• Still more info below…
2
![Page 14: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/14.jpg)
• Is this product any good?– Editorial reviews– Customer reviews– RECOMMENDATION COMMUNITY
(G4)
2
![Page 15: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/15.jpg)
3
![Page 16: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/16.jpg)
• What site am I at? – Logo in upper-left– Colors, layout, font– Examples of SITE BRANDING (E1)
3
![Page 17: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/17.jpg)
• Where am I in the site?– Last link clicked was “Buy!”– “Shopping Cart” and “Proceed to
Checkout” reinforce that this is “the right page”
– SHOPPING CART (F3)
3
![Page 18: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/18.jpg)
• Cross-selling– Possibly a pleasant surprise– Impulse buy– CROSS-SELLING & UP-SELLING (G2)
3
![Page 19: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/19.jpg)
• What am I going to buy?– Easy to remove– Easy to move to wishlist
• How much will it cost?– Shipping costs there, no nasty
surprises• SHOPPING CART (F3)
3
![Page 20: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/20.jpg)
• What can I do?– “Proceed to Checkout” HIGH
VISIBILITY ACTION BUTTON (K5)
– Visually distinct– 3D, looks clickable– Repeated above and below
the fold
3
![Page 21: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/21.jpg)
4
![Page 22: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/22.jpg)
• What if I don’t have a User ID?
• What if I forgot my password?
• SIGN-IN/NEW ACCOUNT (H2)
4
![Page 23: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/23.jpg)
Advantages ❑Quickly prototype ❑Readily available designs ❑Users are tuned into the designs
![Page 24: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/24.jpg)
Dis-advantages ❑Curtails creativity❑New designs may disturb users / bored with the same designs
![Page 25: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/25.jpg)
Reviewing 4 websites!
❑Amazon ❑Flipkart❑Snapdeal ❑Facebook❑Twitter ❑YouTube ❑TimesofIndia ❑Washingtonpost
![Page 26: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/26.jpg)
IDEO Video
![Page 27: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/27.jpg)
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
![Page 28: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/28.jpg)
Sketching & prototyping Video
![Page 29: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/29.jpg)
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
![Page 30: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/30.jpg)
Digital prototyping Video
![Page 31: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/31.jpg)
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
![Page 32: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/32.jpg)
Native prototyping Video ❑https://www.youtube.com/watch?v=lusOgox4xMI&t=342s
![Page 33: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/33.jpg)
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
![Page 34: Linkedin/in/ponguru/ Introduction to Human Computerprecog.iiitd.edu.in/hcionnptel/2018/slides/... · Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 6.1](https://reader035.vdocuments.us/reader035/viewer/2022070904/5f6fe566e76cdd7f953c86a4/html5/thumbnails/34.jpg)
Ponnurangam Kumaraguru (“PK”)Associate Professor
Indraprastha Institute of Information TechnologyNew Delhi – 110078