HUMAN COMPUTER INTERACTION

Lecture 8
 the systems

info and help management messages

start

Navigation Design add user remove user

How is the interface structured

main remove
confirm
screen user

add user
Levels of Interactions

• Widgets choices
– The appropriate choice of widgets and wording in menus, buttons
helps, how to use them for particular selection or action.
• Screen design
– Need to find things on the screen, understand the logical grouping of
buttons etc.
• Navigation design
– Need to able to understand what will happen when a button pressed,
where you are in interaction.
• Environment
– Other apps, O/S. Word file read file from remote networks.
Levels of Interactions

• We can see similar levels in other types of application and

devices.
Navigation Design

• We look at navigation design, that is the main screens/modes

within a system and how these are interconnected.

– Local structure
• Users have partial knowledge and an incomplete model
in their mind. They use this to navigate through the
system.

– Global structure
• structure of site along functional boundaries.
Local Structure : one screen looking out
• Most of interaction involves goal-seeking behavior.

• If a user have perfect knowledge about the system, he uses the shortest
paths to reach the goal (i.e. shortcuts, correct key and menus selection).

• However, partial knowledge users meander (zigzag) through the system.

– Efficient route doesn’t matter, but must able to assess situation whether they are getting
closer to their goal.

• However, each state of the system must give enough knowledge of what
to do to get closer to the goal.
Goal seeking

goal
start
Goal seeking

goal
start

progress with local knowledge only ...

Goal seeking

goal
start

… but can get to the goal

Goal seeking

goal
start

… try to avoid these bits!

Four golden rules: (When looking at single state of system)

• knowing where you are

• knowing what you can do
• knowing where you are going
– or what will happen
• knowing where you’ve been
– or what you’ve done
 Where you are

i.e. A movie player ‘downloading’ % percentage.

Bread crumbs in a website i.e. Shows path through web site
hierarchy
top level category sub-category
web site this page

live links
to higher
levels
What you can do
• What can be pressed or clicked to go somewhere or do something.

• Some web pages are particularly difficult to identify

– Which image is used for decoration and which are links to take you
somewhere.
– Some underline links and its color may confuse the user.

• Minimalistic design also create problem

– Shower example i.e. active tile was leveled with rest of the tiles, was very
clean design but not usable.

• However, the action area must be visible.

Where you are going
• When you press a button or take an action, what will happened?

• In web pages user can try clicking to see and can return by ‘back’ mechanism
or buttons as well.

• However, in some devices, action of clicking may cause some effects.

• If system has an easy means to undo or reverse action this is not bad.

• But its better, users do not have to use ‘try it and see’ interaction, when the
response time of device is slow and becomes annoying.

• For example, some times icons are not self-explanatory and should always be
accompanied with labels, tool tip etc.
Design Focus: Beware the big button trap

things other things

the thing from

more things
outer space

• where do they go?

– lots of room for extra text!
Where you’ve been-what you’ve done
• Once a user has done some major action/task, he wants some
confirmation of what he has been done.

• If user has perfect knowledge about system, he would want assurance of

what he has achieved.

• In case of novice user, system must give some feedback to say, what has
happened.

• This helps you to feel in control and understand your navigation of the
system

• Confirmation messages, feedback, dialog boxes, color changing

Design Focus: Modes
• Special care has to be taken if same command/button provides something
different in different contexts.

• So, modes must be clearly visible to reduce the confusion.

• lock feature to prevent accidental use …

– remove lock - ‘c’ + ‘yes’ to confirm (remember menu and * in 3310)
– frequent practiced action
• if lock forgotten
– in pocket ‘yes’ gets pressed
– goes to phone book
– in phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !
Global Structure :
• Look at the overall structure of application, i.e. various screens, pages or
device states link to one another

• One way is organize a system into the form of hierarchy. Breakdown into
categories or functional boundaries divisions.

• Hierarchy links screens, pages or states into logical grouping. Next we will
see the basic hierarchy breakdown of message system.

• Generally, information structuring is considered as difficult.

• However, people find hierarchies simpler to understand the overall

structure of a system.
Hierarchical diagrams : messaging system

the system

info and help management messages

add user remove user

Navigating hierarchies
• Generally, deep hierarchies are difficult to navigate.
– Better to have top-level categories, or several levels of menu on one
screen or web page.

• Usually, Miller’s magic number of 7 ± 2 short term memory rule is

misused in the context of menus.
– Some guidelines suggest that the number of levels in menu should be
around 7.
– Practically, optimal breadth can be quite large, perhaps a web page can
have 60 items considered optimal, if items are organized in such a way
that an eye can easily find the target.

• However, organising of items may requires further classification,

but it is difficult to find naturalness in this classification.
– i.e. City info, most convenient list alphabetically city names, or region wise
division may be appropriate.
– http://www.sabaq.pk/
General Website Navigation Topologies

• The link topology of a website refers to how the pages or

screens are linked together. There are several standard
layouts.

• Linear
• Hierarchical
• Webbed
Linkage Topologies… (Cont.)

• Linear Navigation
– Linear navigation systems only allow the user to navigate
through the interface in one way.
– Linear systems are normally non or minimally interactive,
with start, next and back buttons but no others.
– Linear systems are the most structured of all the
topologies.
Linkage Topologies… (Cont.)

• Linear Web Navigation

–
Linkage Topologies… (Cont.)

• Hierarchical Navigation
– A hierarchical based site is similar to a family tree in that
every page has a parent page.
– Each page has only one path leading to it.
– The structure of this types of sites is very rigid, but can be
useful for organizations with discrete departments
requiring a section each.
– Consists of Home page, main section page, subsection
page, content page.
– Breadcrumb trails can also be used in a hierarchical site.
Linkage Topologies… (Cont.)

• Hierarchical Navigation
–
Linkage Topologies… (Cont.)

• Webbed Web Navigation

– A webbed topology allows the user to navigate in a more
fluid fashion.
– The range of webbed topologies is quite broad, ranging
from almost hierarchical with additional links, to where
each page will link to others of similar or related topic but
where there is no underlying categorization by topic.
– E.g. build a membership sites like, eBay, Amazon,
Wikipedia, dictionary websites (can go from one link to
another).
Linkage Topologies… (Cont.)

• Webbed Web Navigation

–
Deep or Shallow Linking
• Deep linking user has small amount of choices in one time,
which they can click to access the next set of choices and so
on until they have narrowed down the choices sufficiently to
have reached the desired content.
– deep linking is the use of a hyperlink that links to a specific, generally searchable or
indexed, piece of web content on a website (e.g., "http://example.com/path/page"),
rather than the website's home page (e.g., "http://example.com/").

• Many usability experts believe that this method is the most

effective at getting the user to the correct content.
• However, if the links are not clear enough to the user, what
category it might be found, then this method could leave the
user aimlessly searching path after path to try to find the
required content.
Deep or Shallow Linking

• Shallow linking most of the links are available to the user at

any one time and they can easily get to their desired
destination in one or two clicks.

• Shallow linking would be linking to the front page (or “home

page”) of a website

• However, some usability experts claim that seeing too many

links at once can confuse the user, particularly if they are
novice users, or cognitively impaired.
Navigation Visibility
• Some sites have navigation bars (show all the links available all the time).
• Others require that the user hover over a link or click a tab to get access
to a second level drop down menu.
• The use of drop down menus cause problems if the user is new to the
internet, or has slight motor problems.
Navigation Visibility
• Mega menus type of expandable menu in which many choices are
displayed in a two-dimensional dropdown layout
Navigation Visibility
• Mega footers : although some users do use them to get a sense of the
structure of the site, as it functions as a mini sitemap
Navigation Visibility
• Tabbed Navigation Systems: Good for usability generally because of the
visual cues given to the user regarding what section they are in
Navigation Visibility
• Breadcrumb Trails: These are useful links, normally found at the top of a
page, which allow the user to trace their way back through the hierarchy
of a site allow the user access to other pages in a logically organized
fashion which are similar to the page they are on give the user a sense of
the organization of the site structure
• Breadcrumb Trails can only be used in a hierarchical site, as in other
structures there may be multiple paths leading to each page.
Navigation Visibility (Link Color)
• Default Unvisited Links
• Keeping the link color blue and underlined has been found to help users
to navigate.
• Never use a blue underlined style for any text that is not a link.
• It may be possible to change the shade of blue of an unvisited link with
affecting usability.

• Visited Links
• Visited links should always look different to unvisited links.
• The default color of visited links is maroon.
• If changing the visited link color, ensure that it is less saturated than the
unvisited link color as users generally understand that concept.
Navigation Visibility (Link Color)
• Hover
• Some usability and accessibility investigators have claimed that the best
color combination to use for a link hover effect is the inverse colors of the
link and the background.
• For example, if the link is normally orange text on a blue background, the
most visible hover effect would be blue text on an orange background.

• Active Links
• Active link colors help the user by making it clear that the link they have
just selected has been actually selected and the page is being loaded.
• Active links are normally brighter or more vibrant in color to either
visited or unvisited links.
• 11 ways to improve the navigation on your mobile site
• https://econsultancy.com/blog/62760-11-ways-to-improve-the-navigation-on-your-mobile-
site#i.1u96b9490geroq

• 10 Guidelines For Navigation Usability

• https://usabilitygeek.com/10-guidelines-for-navigation-usability/

• Examples of bad navigation

– http://www.restaurantguideatlanta.com/

• Common mistakes in web navigation

– https://blog.kissmetrics.com/common-website-navigation-mistakes/
10 Guidelines For Navigation Usability
https://usabilitygeek.com/10-guidelines-for-navigation-usability/

• When usability comes, ease of navigation should be a top priority for web
developer.

• Improper or confusing navigation, user becomes lost what to do next.

• So, what makes website navigation easy and usable?

1. Embrace Predictability
• Being creative with your website is nice, but don’t practice this in areas where
predictability may be preferred over uniqueness.
• This is particularly true for website navigation menus that visitors are going to use
simply to get from one page to another.
• Creating unconventional navigation will only make it confusing – and confused
users are less likely to stay on your page any longer.
2. Keep it Simple
• In a way, this goes hand-in-hand with predictability, except here you avoid
making your navigation extremely difficult to comprehend.

• For example, you may have a predictable design, but if it is full of

cluttered menus and submenus in a disorganized fashion, you’re far from
making it easy for users to navigate through your website.
3. Don’t Overdo Minimalism
• Recently minimalism has caught on and everyone seems to be reducing
content, promoting “white space”, and simplifying typography.
• This is great because nowadays internet users are more concerned about getting
work done as fast as possible through mobile devices on-the-go, rather than
viewing fancy pages that may take forever to download.
• However, some designers over-do minimalism, rendering clear and proper
navigation useless. This is a big mistake!
4. Keep it Consistent
• It’s always good to keep the theme and structure of your pages consistent.

• The first time a user visits your website, he/she is going to make sense of
it in just a matter of seconds (shouldn’t take longer).

• After that, your user is going to expect all the pages to be similar in terms
of structure and design.

• Having an entirely different navigation system page by page will only

frustrate the user because the “making sense of it all” process will have to
repeated unnecessarily every time.
5. Clear Hierarchical Structure
• Navigation menus should have a clear hierarchical structure with every category
and clickable sub categories included in the menu.
• This gives the user a clear idea of what you can offer without having to go through
several pages to find what they are looking for.
• This is particularly important for websites that offer a wide array of products and
services.
6. Make it Manageable
• Clear navigation in your user interface is highly usable when it tells visitors
where they have come from, where they are currently, and where they
can go from their current location.

• This obviously requires a breadcrumb trail on your website, allowing users

to keep track of their location, making navigation more manageable and
under their control.

• Remember that not all users will start visiting your site from the home
page. Many will land on an inner page after clicking a link from another
site or from the Search Engine Results Page
7. Link the Logo to the Homepage
• A good practice is to link the homepage from the website’s logo (which
should appear on every page at the same spot).

• Users have a tendency to start all over by going back to the home page
and redoing the search process from there.

• Furthermore, many users are highly likely to search up your website using
a search engine which could lead them to a specific page deep within
your website.

• Users are going to want to click on your homepage from there so they can
explore more of your website.
8. Include a Sitemap
• Sitemaps are crucial for a usable navigation system. Any lost user will
resort to a sitemap that has links to all pages (or the main pages) of a
website.
• Bear in mind that the sitemap should be concise without extraneous
details on every single topic.
9. Provide More than One Navigation Menu
• This is to ensure that the users are easily able to navigate through the
website from anywhere in case they have missed a certain navigation
type.
10. Always Include a Search Bar
• Always, always, always include a search bar.
• Search bars are extremely necessary for making your website’s search
interface more usable.

• This is another way to navigate through your website without having to go

through navigation menus and other options.

• Today’s internet users are prone to search bars/boxes to find the

information they are looking for—and find it fast! Large websites that
have surplus content are incomplete without search bars which would
save a user a lot of time.

• Also, the search option should search your complete website based on
keywords instead of leading users to someone else’s website.
Navigation Maps
• Navigation maps are a design activity that represent how the
user navigates through the system
– Show pages/screens together with links and their direction
• 1 box per page/key moment - where can you go from here
• include backwards as well as forwards flow
– Not just for web sites
– Frequently, drawing them helps spot:
• orphan pages (webmaster private page, not search by SEO, not linked)
• dead ends (404 error page)
• structure is getting too complex and users will get lost
Navigation Maps
• Why Use it?
– Help identify how the user might navigate
– Help identify how the information should flow
– Identify the page distribution of the website
– Plan for site creation and linking

• Participants Needed
– The designer or design team should be involved in this phase.
– Use of scenarios prior to making the navigation map can help to iron out
confusion in the ordering of information.
• Conditions required
– Information on the content to be included
– what it is?
– what order it should appear in
– is any piece of information dependent on another?
Navigation Maps
• Task List
– Sketch out all pages or screens by hand using simple labelled rectangles
– Link them with lines where it is possible for the user to directly move from one
page, screen or movie to another
– Indicate the direction of movement throughout with arrows
– For complicated structures, use different colors to indicate other information,
such as whether the link is static or dynamic (i.e. just a link or passing a
variable), or whether the information is being sent to the database or received
from it.
– When complete, you might like to formalize this as a digital diagram
– It may also be necessary to separate out user perceived navigation, from
actual information flow.
Navigation Maps (Example)
Navigation
Maps
(Example)
Activity: HOW TO CREATE A SITEMAP: 6 STEPS FOR A MORE
THOUGHTFUL WEBSITE
https://www.educowebdesign.com/blog/insights/how-to-create-sitemap

• Examples from a fictional music school in Coltrane University.

Coltrane University is a graduate-level music school with an in-person
campus and online courses. Their campus programs offer full-time
performance degrees, and campus life focuses on in-person
workshops, jam sessions, and concerts. Their online programs offer
certifications.
 1- Define Your Users
Website should provide relevant information to your users. How ?
• Who are your users?
– we have three groups of people who use the website:
1. Prospective Students
2. Current Students
3. Faculty & Staff

• What are they looking for?

1. Prospective Students are looking for more information about degree
programs. They may want to request information or apply online.
2. Current Students are looking for program-related resources. Campus
students are looking for events and other on-campus resources. Online
students will want to log in to their user portal.
3. Faculty and staff are looking for program-related resources and campus
events.
 2. Identify Your Focus Pages
• Now that you have user group descriptions, review what you've
written. Identify which user needs might require a specific page.
These will be focus pages — pages based on specific user needs.
– Prospective Students are looking for more information about degree
programs. They may want to request information or apply online
– Current Students are looking for program-related resources. Campus students
are looking for events and other on-campus resources. Online students will
want to log in to their user portal
– Faculty and staff are looking for program-related resources and campus
events
• By doing this exercise, we’ve discovered 6 focus pages for the new Coltrane
University Site:
 3. Choose Your Basic Pages
• Now that you’ve got your focus pages, you’ll want to add other pages not
captured by your user exercise. These are basic pages — common
informational pages shared by many websites. Here’s a list of common
basic pages:

• We have also identified some important new pages for our

sitemap: Home, People, News, Contact
• At this point, consider if the basic page titles are a good fit for your
navigation. With Coltrane University, People could be
called Faculty and Contact could be called Campus. This gives us 4 new
basic pages for our site:
 4. Organize Your Navigation
• Once you have your working list of pages, it’s time to organize your site navigation.
Many sites contain two important navigation menus, Primary Navigation & Utility
Navigation:

• Primary Navigation is the basic content hierarchy for your website. It contains
“buckets” for all of the important content. It should be clean, with no more than 7
or 8 links. Otherwise, it starts to look cluttered.
• Utility Navigation is an additional menu, smaller than the Primary Navigation.
Some common utility links are Shopping Cart, Login/Logout, Site Search, Contact.
 5. Add Subpages
• Subpages are second-level pages in the Primary Navigation. If one of your
Primary pages easily breaks down into further “content buckets,” try laying
out a Subpage structure for that page.

• In University, we know that there are different degree programs and

different types of resources. So, we need a Subpage structure for
Programs and Resources:
 6. Create a Visual Layout
• Now you have everything you need to make the first draft of your
sitemap.
• For Coltrane University, our visual layout shows both Primary and Utility
Navigation:
 The Revision Process
• Once you've made a visual layout, you have a draft to share it with your
team. Most sitemap drafts go through 2-3 rounds of revisions, so you can
expect to make tweaks, additions, and subtractions based on discussion
and feedback.
Activity
• Construct a navigation map for a shopping website. In doing this you will
have to consider:

– What way will you allow the user to navigate the site?
– Will you use deep or shallow linking?
– Will your site be hierarchical, webbed or linear in structure?
– Will you use in-line links, navigation bars, search functions, breadcrumb trails,
dropdown menus, image-maps?
– How will you ensure that your users know where they are and where they can
go?

– https://www.educowebdesign.com/blog/insights/how-to-create-sitemap
Reference
• Chapter 5.6