Bahria University, Lahore Campus

Department of Computer Sciences

Lab Journal 01
(Fall 2020)

Course: Human Computer Interaction Lab Date:

Course Code: SEL - 320 Max Marks: 20
Faculty’s Name: Lab Engineer:

Name: Mohammad Jasim Waqar Enroll No: 03-135172-055

Objective(s) :
 Understanding of why HCI is important.
 Differentiate between good interfaces and bad interfaces

Lab Tasks:

Task:

1. You are required to search over the internet and list down softwares which flopped
due to poor interfaces and softwares which got success because of good interfaces. Also
state reasons against each software for their success and failures.

Flopped due to poor interfaces

 The whole website looks colorful, contrasting and prominent.

 A lot of too bright colors are too mixed.
 It looks more like a colorful painting than an online business website.
 %
Enrollment Number: ____________________________
 The combination of exaggerated colors makes the readability of the texts became very
poor.

 Use too many elements of different styles

 The text area uses contrasting colors and different font sizes to highlight the info.
 The text on the second level also uses a highlight blue color, which in fact breaks the
unity and balanced hierarchical interface.

 It only makes the user more confused.

 The navigation must be eye-catching and should often be at the top of the page.

Page 2 of 6
 %
Enrollment Number: ____________________________
 Not Format of test
 Uses irrelevant pictures
 So, Fixated Towards Outdated & Clustered Design

 Everything is exaggerated here.

 The combination of conflicting colors, incompatible fonts, unformatted and unstructured
content, underlined links
 This page collects all possible and impossible mistakes in one place.
 Navigation menu in the middle of the page and primitive animations of different size
blinking all over the page.

Success because of good interfaces

 Prioritized making it easy to start booking a stay right from the home screen.

Page 3 of 6
 %
Enrollment Number: ____________________________
 Easy to search about the places where we want to visit.
 After a user has requested to book a location, they are taken to a new checkout page. The
listing, pricing and booking information sits to the right of the page to reduce the need
for the guest to retain the information from the previous page.
 Airbnb has cleverly thought out its copy and used engaging photos and videos to ensure
that the interface conveys an emotional tone that helps create a sense of trust between
strangers.

 Dropbox has one of the most easily understandable interfaces by far. Having a folder and
file organizational structure is easily recognizable
 Dropbox’s friendly personality, created by lighthearted illustrations, helps the user feel
comfortable when using the product.
 There’s so much attention to detail, with sequenced color palettes and animated icons,
and wonderful illustration

 Their site gives a nod to recent design trends with their comprehensive use of illustration.
 The Pixar-like use of 3D character design is usual in this space, and therefore instantly
identifiable.
 Added some smart, subtle dynamic elements and animations which bring the site to life
and nudge the user from one scroll to the next.

Page 4 of 6
 %
Enrollment Number: ____________________________

 Fluid animations and smooth transitions between pages make this interface memorable
and desirable to users.
 Creating a usable, frictionless UI is an essential part of creating a positive connection
with a user.
 When designing or evaluating an interface, it’s best to refer to the usability guidelines

 Medium, an online reading and publishing platform, is just as gorgeous as it is functional.

With minimal use of color, generous line spacing, and a well-chosen combination of
typography, this website gets everything right.
 Articles are set up in a one column format, making content easy to digest. With little
touches like estimated read time and the ability to highlight and respond directly to
specific pieces of articles, Medium truly provides users with an amazing and effortless
editorial experience

Page 5 of 6
 %
Enrollment Number: ____________________________
2. You are to visit any website and list down any glitches/errors which in your
perspective needs to be rectified.

 Non-Responsive Web Design

 Random use of colors
 Poor typography makes it unreadable
 Unbelievable navigational structure
 The biggest problem is that the site doesn't use a grid
 Bad color selection
 Not Format of text
 Uses irrelevant pictures
 So, Fixated Towards Outdated & Clustered Design
 Complicated Navigation Confuses the User
 Website Lacking Contrast
 Badly Designed CTAs
 Not having A Good Information Architect
 Unwanted Pictures on the Background
 No proper Formatting

Lab Grading Sheet :

Max
Obtained
Task Mark Comments(if any)
Marks
s
1. 10
2. 10
Total 20 Signature

Note : Attempt all tasks and get them checked by your instructor.

Page 6 of 6