Assignment Of HCI

Topic :
Good And Bad Design App
Submitted To :
Sir Abid Rafiq
Group Members :
Muhammad Owais Raza
BSITF17M039
Muqadas Nawaz Chattha
BSITF17M024
Ahsan Mushtaq Gondal
BSITF17M016
Good Design
Characteristics
1. Mobile Compatibility
2. Accessible to All Users
3. Well Planned Information Architecture
4. Well-Formatted Content That Is Easy to
Scan
5. Fast Load Times
6. Browser Consistency.
7. Effective Navigation
8. Good Error Handling
9. Valid Mark-Up & Clean Code.
10.Contrasting Color Scheme
11.Usable Forms
12.Use correct labels for all fields
13.Follow good form design principles
14.Try to keep the number of fields to a
minimum
15.Offer tooltips and suggestions
16.Display on-screen message on
completion
17.Use correct validation
18. Good design makes product usable.
19. Good design is innovative.
20. Good design makes product
understandable.
21. Good design lasts longer.
22. Good design is minimalist.
23. Good design is based on research
and takes into consideration of every
single product detail.
 Examples of Good Design
App
Good Interaction Design:
As1.
Dave Malouf pointed out, a good interaction is made of
many areas which overlap because: “interactions are
moments of contextual gestalt and one element has a direct
impact on the others”.
1. ESPN takes its sports content and programming to the
next level.
2. Dynamic and eye-catching site filled with large, high-
resolution images and video.
3. The site utilizes background video to keep up with the
sports network’s energy.
4. Sections with subtle hover and transition effects and to
keep the user experience smooth.
5. The ‘featured sports’ slider is thoroughly entrancing
and does an excellent job of showcasing each of the
sports alongside.
6. Interesting statistics and informative details about
available programs. 
2.
1. Montage takes showing-off its
product to the next level .
2. Easy to maneuver homepage
that clearly outlines what its
product is, how it looks,
product quality, and
testimonials.
3. The site is an excellent
example of one approach you
can use to highlight your
product.
4. The most important points
your users would be
concerned with finding
answers to.
5. The sticky sub-navigation
allows users to easily navigate
3.
1. Finding the perfect home is all about being
able to conveniently research exactly what
you’re looking for.
2. Save and store what you like, and make it
easy to find it all later on.
3. Zillow hits the nail on the head for all three
of these points with its intuitive real estate
site.
4. The search area within the hero area makes
it easy for new users to quickly select and
search listings without having to look for
some hidden search page.
5. Easy to use.
 4.

1. Revols takes a bold approach

on its website by enlarging its
small.
2. Sophisticated headphones
using macro photography and
video.
3. The photography and video
make the site incredibly
product-focused.
4. Users slowly become more
and more immersed in the
experience these headphones
can give you.
5. The large font treatment on
this site is also a nice touch
and adds to the larger-than-
life earbud photography. 
 5.
1. Fifty-three captures all the
features and benefits for its
Pencil Stylus throughout this
standalone product page.
2. These features and benefits
are accompanied by images
to illustrate the product in
action.
3. User has an easier time
visualizing them and how
they can apply the product.
4. The layout and visual
treatment of the product's
anatomy section are also
very unique.
5. Act as a dynamic way to lead
users to read more about the
product, as opposed to static
sections one after another. 
 6.
1. Unlike traditional
product-focused sites,
Morgan Stanley
headlines.
2. Its homepage with an
article they hope to drive
a significant amount of
traffic.
3. Especially since it
connects with the holiday
family gatherings we’re
expected to attend.
4. The rest of the layout
beyond the homepage
hero plays with a grid-
focused layout to
organize
5. The assortment of recent
articles they’ve posted. 
7.
1. Boosted took what could have been seen as an
average skateboard to the next level.
2. By introducing amazingly detailed photos of its
product accompanied with detailed
descriptions on its site.
3. The site's gray tones and white backgrounds
help keep the focus on the orange call-to-
action buttons.
4. The brightly colored skateboard they use as an
example of the product.
5. I also love the fact that they have a blog that
seems to highlight issues.
6. They have/are addressing with the product,
adding a wonderful level of transparency to the
company.
 8.
1. Although the site is smaller than
others, Quiver still manages to
shine among the rest. 
2. I love the fact that they utilize
emotion immediately when you
arrive on the homepage with the
background and the copy.
3. They even managed to get a
signup form in there, rather than
only incorporating a button that
sends visitors to a separate signup
page. 
4. Quiver's product and features
pages do a beautiful job of
displaying.
5. The appearance of the software
accompanied with small interactive
elements to help show how the
product works.
6. Its fulfill the user needs. 
Bad Design Characteristics:-
1. It doesn’t fit with business objectives and
overlooks the target market.
2. Lack of balance between design and
content.
3. Offering a wide range of unnecessary
features.
4. Lack up-to-date technology.
5. Typography that does not match brand
personality.
6. Design that does not cater to the mobile
audience.
7. Lack any social integration.
8. Hard to find contact information.
9. Not incorporating Google Maps.
10. Unfriendly and non-intuitive site
navigation.
11. No clear Calls-to-Action (CTA).
12. None or minimal elements that build
trust with visitors.
13. Stuffing that increases a site’s load time.
14. Lacks structure or Information
Architecture (IA).
15. Not optimized for Google or search
engines.
Examples of bad design:-

1.
1. Poor typography
makes it
unreadable.
2. The biggest
problem is that the
sit doesn't use a
grid.
3. Unbelievable
navigational
structure.
4. Random use of
colors
5. It is difficult to get
information from
that page
 2.

1. Lacks aesthetic design

with no defined
navigation.
2. Overflush left body
copy with no clear
message.
3. Poor use of graphic
that doesn’t resonate
with business value.
4. It doesn’t have any call
to actions.
5. Difficult to use.
 3.
1. Bad typography with
poor readability
feature.
2. Font is not clear.
3. Fonts and color don’t
connect with the
website.
4. Lacks proper call to
action. There is only
a phone number that
too at the bottom.
5. Flash is dead.
4.
1. Links on navigation
doesn’t work.
2. Random use of colors
that give negative
vibes.
3. Lacks a clear picture
of the website.
4. Large meaningless
graphics
5. All the information is
mix.
5.
1. Poor user
experience.
2. Random use of color
with text that’s
hardly readable.
3. No white space used.
It’s clearly not
pleasing to the eye.
4. No navigation what
so ever. I have to
reach to the bottom
to find some
information.
5. Don’t fullfill the
purpose.
 6.
1. The key information
isn’t transparent.
2. The color
combination doesn’t
match with the
theme and niche.
3. Typography and
graphics are horrible.
4. A website isn’t
responsive in nature.
5. No or poor use of call
to action buttons.
6. Takes ages to load.