4 - Designing For Web

Advanced Human Computer Interaction 11/18/2019
Advanced Human Computer

Interaction
Riphah Institute for Computing and
Applied Sciences
Dr. Ayesha Kashif
Designing for Web and Mobile
Dr. Ayesha Kashif – Riphah Int. Univ 1

Site Objectives and user Needs

▪ Who is the Site For?
▪ Why People Visit Your Website
▪ What Your Visitors are Trying to Achieve
▪ What Information Your Visitors Need
▪ How Often People Will Visit Your Site
▪ Site Maps
▪ WireFrames
▪ Getting your message across using design
▪ Visual Hierarchy
▪ Grouping and Similarity
▪ Designing Navigation

▪ Who is the Site For?
▪ Every website should be designed for the target audience—not
just for yourself or the site owner.


▪ Why People Visit Your Website

▪ What Your Visitors are Trying to Achieve
▪ What Information Your Visitors Need


▪ How Often People Will Visit Your Site
▪ Some sites benefit from being updated more frequently than
others. Some information (such as news) may be constantly
changing, while other content remains relatively static.

▪ Site Maps


▪ WireFrames
▪ A wireframe is a simple
sketch of the key
information that needs to
go on each page of a site.
▪ It shows the hierarchy of
the information and how
much space it might
require.
▪ The wireframes make
design easier because you
know what information
needs to appear on which
page before considering






▪ Most web users do not read entire pages. Rather, they skim to
find information. You can use contrast to create a visual
hierarchy that gets across your key message and helps users find
what they are looking for.

▪ refers to the order in
which your eyes
perceive what they see.
It is created by adding
visual contrast between
the items being
displayed. Items with
higher contrast are
recognized and
processed first.


▪ Grouping and Similarity
Information Architecture
▪ Designing for Web
▪ Page-Based Interaction
▪ The Mobile Web
▪ Designing for Mobile
▪ Anatomy of Mobile App
▪ Mobile Navigation, Content and Control Idioms
▪ Multi-Touch Gestures
▪ Inter-App Integration
▪ Other Devices

Designing for Web

▪ Navigation and Wayfinding
▪ Primary Navigation
▪ Secondary Navigation and beyond
▪ Content Navigation
▪ Searching
▪ Scrolling
▪ The header and footer
▪ Paging vs Infinite Scrolling
Designing for Web

▪ Page-Based Interactions
▪ Many of the most important conventions and considerations for
designing web experiences are tied to the concept of the page.
▪ Native applications are usually constructed in terms of screens or
views.
▪ Navigation and wayfinding
▪ on the web, each piece of content typically has its own place (or,
rather, URL), and the trick is figuring out how to help people get
to the content they want. This leads us to the field of
▪ Information Architecture
▪ design issue resulted from supporting numerous hyperlinked
pages: the challenge of organizing and structuring content across
pages in a meaningful way.
▪ a discipline and practice to address the nonvisual design
problems of logical structure and flow of content.
▪ logical organization creating meaningful interactions related to
navigation.

Navigation & Wayfinding: Primary Navigation

▪ Primary navigation
▪ how the user gets to the major areas or sections of a website or
application
▪ Websites included persistent links along the top or left side.
▪ Top Navigation
▪ can accommodate only a few items of limited length
▪ Forcing designers to reduce the number of major areas of a
website or application—and
▪ to keep the titles short and punchy—
▪ usually has a better chance of resulting in something that is
comprehensible and useful to users




▪ Left-side Navigation
▪ items can be longer, there can be more of them, and they
are easier for users to scan because they are left-aligned
▪ dynamically hiding
and showing
navigation controls
that depend on the
user’s location in
the system, and
even where he or
she is on a page.


▪ Locked Navigation bar
▪ An increasingly popular and successful pattern is to keep this top
navigation bar locked to the top of the browser window when the user
scrolls.
▪ Top Navigation reduced

in size after the user
selected a particular
community

Designing for Web

▪ Searching
▪ Scrolling
Navigation & Wayfinding: Secondary Navigation

▪ Secondary Navigation
▪ left-hand menu or a second stripe of horizontal navigation
links


▪ Fat Navigation

▪ Breadcrumbs

Designing for Web

▪ Searching
▪ Scrolling
Navigation & Wayfinding: Content navigation

▪ Content navigation
▪ the navigation of content such as photos and articles.
▪ Relationships between them often are associative, rather
than strictly linear or hierarchical
▪ items are presented
▪ in listings of some sort
▪ sequences of headlines and
▪ blurbs for articles, and
▪ galleries for photographs

Navigation & Wayfinding: Content navigation

▪ Content navigation
▪ the “feed” format, popularized by blogs and social media like
Twitter and Facebook
▪ highlight featured content
▪ Using more prominent typography,
▪ by changing the size and position on the page, or
▪ by using a carousel that cycles through features in a more
visual format
▪ be organized in multiple ways (such as by topic, author, or date
published)
▪ make use of the faceted search techniques
Designing for Web

▪ Searching
▪ Scrolling

Navigation & Wayfinding: Searching

▪ Searching
▪ Auto-Complete / Type ahead
▪ a number of choices for complete search terms are presented
▪ These can be based on previous searches (as Google does) or
▪ actual results (the Spotlight search function in Apple OS X).
▪ Auto-complete greatly increases the chances that the user will
enter a search term that is likely to have a meaningful result set

▪ Disambiguation, or auto-suggest
▪ if the searcher types a word that is spelled similarly to a more
commonly searched word (or, more often, mistypes or misspells the
word they really meant to search for),
▪ Google displays a list of suggestions along with the results.
▪ It also provides a link to the top suggestion as part of the results.


▪ Faceted Search
▪ Allows users to specify the attributes of the item they are
looking for

▪ Categorized Suggestions
▪ search term is applicable across many different categories or domains
▪ system offering a list of suggestions, each of which scopes the search to
a particular category

Designing for Web

▪ Searching
▪ Scrolling
Scrolling
▪ Scrolling
▪ Web designers have long been concerned about the
“fold”—the vertical position on the page below which
content isn’t visible upon page load.
▪ touchscreen interactions and things like Apple’s Magic
Trackpad have made scrolling much more natural and
expected

Scrolling
▪ responsive design, in which a web page is designed to
format itself appropriately for the size of the user’s screen
Scrolling
▪ popular “parallax” effect, in which different onscreen
elements respond to the user’s scrolling at different speeds

Scrolling
▪ Scrolling long pages
▪ create an effective visual rhythm
through the use of white space
and a strong typography system
▪ improve scanability when the user
scrolls.
▪ It’s also important to help users
stay oriented as to where they are
on the long page.
▪ as the user scrolls down, the
primary navigation docks to the
top
Designing for Web

▪ Searching
▪ Scrolling

Scrolling: Header and Footer

▪ The Header and Footer
▪ The top, often called the header, can be the first thing the
user sees when he arrives on a page.
▪ includes a brand element like a logotype, and
▪ some persistent navigation items
▪ a website or application tells the user whether he or she is
signed in.
▪ The search function often resides in the header.
Scrolling : Header and Footer

▪ The bottom of the page, or footer
▪ suggest where the user should go next, often to related content
▪ for persistent access to more rarely visited areas of your site or
application, like legal notices, or for a complete fat navigation
that includes all top-level and second-level pages

Designing for Web

▪ Searching
▪ Scrolling
Scrolling: Infinite Scrolling

▪ Infinite scrolling
▪ One important scrolling-
related pattern in things like
social media streams and
search results is commonly
called infinite scrolling
▪ As the user scrolls down the
page, the page populates
more results into the bottom.
▪ Assuming you can keep
latency down, this can be a
useful and natural-feeling
interaction.
▪ most appropriate for contexts
such as news feeds,

Scrolling: Infinite Scrolling

▪ Unless carefully designed and
implemented, infinite scrolling may
not retain its place in the list after use
of the browser back button (and
subsequent use of the forward button
to return).
▪ This can take users off guard, and
can lead to a laborious and frustrating
experience of re-scrolling to find a
lost item.
▪ Users will never see the page
footer
▪ Infinite scrolling should never be
employed for interfaces in which
users need to get to the end of the list
quickly, or
▪ need to return to a particular list item
after navigating elsewhere.
Scrolling: Paging
▪ Paging
▪ This is in contrast to the paging of results, in which a
predefined number of results are shown on a page, and
▪ navigational links are supplied so that the user can advance
to the next or previous page, as well as (typically) the
beginning or end of the results, or to an arbitrary page of
results.

References
▪ Alan Cooper , About Face
▪ Steve Krug’s Don’t Make Me Think, Revisited
(New Riders, 2014)
▪ Louis Rosenfeld and Peter Morville’s Information
Architecture for the World Wide Web .
▪ https://alistapart.com/
▪ Ethan Marcotte’s Responsive Web Design (A
Book Apart, 2011).

4 - Designing For Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

4 - Designing For Web

Încărcat de

Drepturi de autor:

Formate disponibile

Advanced Human Computer Interaction 11/18/2019

Advanced Human Computer

Designing for Web and Mobile

Dr. Ayesha Kashif – Riphah Int. Univ 1

Site Objectives and user Needs

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 2

Site Objectives and user Needs

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 3

Site Objectives and user Needs

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 4

Site Objectives and user Needs

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 5

Site Objectives and user Needs

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 6

Site Objectives and user Needs

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 7

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 8

Designing for Web

Designing for Web

Dr. Ayesha Kashif – Riphah Int. Univ 9

Navigation & Wayfinding: Primary Navigation

Site Objectives and user Needs

Dr. Ayesha Kashif – Riphah Int. Univ 10

Site Objectives and user Needs

Navigation & Wayfinding: Primary Navigation

Dr. Ayesha Kashif – Riphah Int. Univ 11

Navigation & Wayfinding: Primary Navigation

Navigation & Wayfinding: Primary Navigation

▪ Top Navigation reduced

Dr. Ayesha Kashif – Riphah Int. Univ 12

Designing for Web

Navigation & Wayfinding: Secondary Navigation

Dr. Ayesha Kashif – Riphah Int. Univ 13

Navigation & Wayfinding: Secondary Navigation

Navigation & Wayfinding: Secondary Navigation

Dr. Ayesha Kashif – Riphah Int. Univ 14

Designing for Web

Navigation & Wayfinding: Content navigation

Dr. Ayesha Kashif – Riphah Int. Univ 15

Navigation & Wayfinding: Content navigation

Designing for Web

Dr. Ayesha Kashif – Riphah Int. Univ 16

Navigation & Wayfinding: Searching

Navigation & Wayfinding: Searching

Dr. Ayesha Kashif – Riphah Int. Univ 17

Navigation & Wayfinding: Searching

Navigation & Wayfinding: Searching

Dr. Ayesha Kashif – Riphah Int. Univ 18

Designing for Web

Dr. Ayesha Kashif – Riphah Int. Univ 19

Dr. Ayesha Kashif – Riphah Int. Univ 20

Designing for Web

Dr. Ayesha Kashif – Riphah Int. Univ 21

Scrolling: Header and Footer

Scrolling : Header and Footer

Dr. Ayesha Kashif – Riphah Int. Univ 22