UI Design Patterns

Manar Osama Alameir

1
 Session One Content
- UI Design Patterns Introduction
- Implementing page structure patterns
• Visual framework
• Centre Stage
• Movable pieces
• Titled Sections
- Organizing content for or the best results
• Slideshows
• Two panel selector
• Lists
• Dropdown menus
• Tabs 'Card Stack‘
• Pagination
- Affording Fluid Navigation
• Global (Top-Level) Navigation
• Breadcrumbs
• Search box
• Inline Linking
• Sitemap Footer
UI Design Patterns Introduction
 What are UI design patterns?
UI design patterns are recurring solutions to common problems in user interface
design. They help us avoid reinventing the wheel and make designing a reliable
solution to an interface design problem a lot faster.
 Why are UI design patterns important?
They’re visual strategies for quickly and efficiently solving common UI design
problems. If a design deviates too far from expected conventions, users will have to
spend extra time figuring out how to use a product.
 UI design pattern formula:
1. Problem: What does the user want to do?
2. Solution: What is the solution?
3. Context: When should the pattern be used?
4. Examples: Where and how has the pattern been implemented before?
 UI design patterns libraries
UI design patterns can’t be plugged directly into an interface. We need to tailor them
to fit a particular scenario.

[Link]
[Link]
[Link]
[Link]
1-Implementing page structure patterns
 Visual framework
Problem:
You're building a Web site with several pages, or a UI with multiple windows in other
words, almost any complex software. You want it to "hang together" and look like one
thing and it should be easy to use.

Solution:
Design each page to use the same basic layout, colors, and stylistic elements, but give
the design enough flexibility to handle varying page content.
When a UI uses consistent color, font, and layout, and when titles and navigational are in
the same place every time, users know where they are and where to find things. They
don't have to figure out a new layout each time they switch context from one page or
window to another.
A strong visual framework, repeated on each page, helps the page content stand out more. Furthermore,
adding character to the design of the visual framework helps with the branding of your Web site or
product the pages become recognizable as yours. (colour, fonts, writing style)

[Link]
[Link]
[Link]
 Center Stage

Problem
The most important information, panel, window, or set of tools should be represented as
such in the user interface. When the users are performing a task, they need a central
area for carrying out actions and operations, while other subsidiary panels, toolsets, etc.
need to be instantly accessible.
Our eyes (and minds) have a natural tendency to look for a focal point in or on useful
(or beautiful) items or designs we choose to examine.
In this web shop, a main task would be to select or even buy a product. However, as the user interface
doesn’t put any product categories at center stage, users are very likely to get distracted by the many
options that overflow the page.
 Solution

Avoid ‘splatter’ first by determining the hierarchy of what you want to present. Place the
most important element of the graphical user interface in the largest subsection, and put
the supporting tools, sets of actions, etc. in other, less prominent panels. By putting the
most important information or frequently used panel center stage, you draw the users’
attention towards it and allow them to maintain focus on it when carrying out their tasks.
 The page's primary job is to show coherent information to the user, let him edit a document, or enable
him to perform a certain task. Most applications can use Center Stage -- tables and spreadsheets, forms,
web pages, and graphical editors all qualify.

[Link]
[Link]
 Movable Panels ‘pieces’
Problem:
Users are working with different applications at once. The applications don’t need to be
arranged in a specific configuration, and the users would benefit from being able to
change the position of one or more of the windows or panels.

Solution:
Where appropriate, allow users to resize and move panels around the user interface. If
they are likely to want or need to multitask, give them the chance to switch panels
around to suit their comfort and switch up smaller ones to make them larger. They
should be able to adjust the size of the screens in a freestyle way, by dragging borders
at the sides or shrinking/expanding panels from the corners.
 You can support users’ workflow by letting them have control over how their windows and panels are
positioned. Especially when users are multitasking. The ability to customize the user interface in this way
also allows users to prioritize their tasks and actions.

[Link]
 Titled Sections

Define separate sections of content by giving each one a visually strong title, and then
laying them all out on the page together.
Here we have an example of what newspapers used to look like, before implementing titled sections. It
became a common practice to help readers find their way to relevant information.
 Problem
When you are dealing with a page, window, or panel that contains a large amount of
information and everything must be displayed at once, users can get overwhelmed.
They will need to spend a lot of effort on scanning the content, in hopes of isolating
information of current interest from all the other content on there, so as to reduce the
amount of scanning they need to do.
 Solution

Titled sections help the user skim a page’s contents and identify interesting or useful
information. Simply put, they are sections of content that have a title which clearly
indicates the subject of that section. Although the solution appears straightforward
enough, when implemented with care, its benefits are far-stretching.
here's a lot of content on the page, but the page is easy to scan and understand.
 [Link]
[Link]
2-ORGANIZING CONTENT FOR THE BEST RESULTS
 Slideshow 'carousel'
Problem:
A collection of media needs to be displayed in a presentation as a sequence of still
images.

Solution:
Slideshows and sliders, is an excellent way to display information such as images in an
organized and compact manner. After a specific time interval one story is replaced by
another – often with an animated transition. Slider galleries are excellent for organizing
content into a nice clean module.
Use when you need to capture attention using multiple stories and minimize screen real estate. To direct
users’ attention toward stories that you have highlighted and when you want to allow users to skim
through several stories without scrolling or doing any other mouse movements

[Link]
[Link]
 Two panel selector
Problem:
There are many occasions where the user needs to see a list of options, categories,
commands or other related items, but he or she still needs the list in view in order to
make a selection. The user must be given the facility to review the contents of one of the
list items while having access to all other items, or an overview of the list structure. Users
need this, as their tasks require them to switch between overall items and specific
content multiple times while they’re performing a task.

Solution:
Put two side-by-side panels on the interface. In the first one, show a list of items that the
user can select at will; in the second one, show the content of the selected item.
Use the two-panel selector anytime your users want to skip through content at speed. It helps them
keep an overview and dive into the details at the same time. It also greatly improves efficiency and
reduces cognitive load.
 Lists

Problem:
You have a large set of items or options, you need to present them to users in a way that
allows them to fulfill their tasks. These tasks can involve viewing the content of different
items quickly or searching for and selecting a particular item.

Solution:
The use of lists. But there are different types of lists that are helpful for different cases.
list inlay
Show a list of items as rows in a
column. When the user selects an
item, open that item’s details in place,
within the list itself. Allow items to be
opened and closed independently of
each other.

A list inlay is especially useful when

items would consume vast amounts
of screen space if their full contents
were displayed all at once. With a list
inlay, the user can usually see a large
proportion of other list items even
when the contents of one are
displayed, affording freedom of
movement from one option to
another.
Archive lists
consolidate data sets into broad
categories, listed by the day,
week, month or year in which
the information items were
uploaded or edited. For each
action on a certain date, the
type of action is added to allow
the users to narrow their search
according to the day and the
group to which their target item
would belong.
Scrolling lists
Scrolling lists allow
displaying a lot of options
without taking up a large
region of the user interface.
Moreover, they enable the
user to view the contents of
a large number of items
without having to move
between different sections of
the user interface.
 Dropdown Menus
Problem:
You have a number of different selections which contain options of where the users can
go or what they can do within a website or application. Some or all of these possible
selections contain further, more specific options, but you do not want to send a user to a
whole new page, window, or panel so as to be able to see them.

Solution:
A vertical dropdown menu allows you to display a list of contents, navigation points,
and functions without flooding the user with lots of options all at once. We would
present options to the user in the form of a vertical list whenever the user clicks the
menu label or hovers the cursor over. The user can then select one of the dropdown
menu options by clicking on the appropriate content name. These options might take
the user to another page or they might lead to the presentation of a new menu or
panel, or the execution of a function.
vertical dropdown menu
Each list of options is assigned a content-
defining title, and these are placed
horizontally along the top of the screen or
panel. when the user places the cursor
over the list of options ‘drops down’ or
clicks on it. Users can see all of the
contents in that specific menu, ensuring
they only ever have to attend to one list of
options at a time. Typically, dropdown
menus are designed so the list item under
the cursor is highlighted serving to inform
the user which option is or will be selected.
Nearly all users, no matter what their level
of experience, will be familiar with this
means of organizing content. Therefore, if
you are designing a website or application
intended for general users, dropdown
menus provide a familiar user interface
design pattern.
horizontal dropdown
Horizontal dropdown menus are an
addition to vertical dropdown menus,
which help save the user from having
to go to separate sections of the user
interface at each stage of an option-
selection sequence
Using a horizontal dropdown menu
allows the user to view a large
number of options from one page
and help keeping the number of
page refreshes to a minimum.
Displaying all the sub-categories of
options within the same general
space occupied by the highest order
of categories. Users simply have to
switch their view a little to the right
every time a horizontal menu is
selected.
Mega dropdown menus (fat menus)
Display a long list of navigation
options in drop-down or fly-out
menus. Use these to show all the
subpages in site sections. Organize
them with care, using well-chosen
categories or a natural sorting order,
and spread them out horizontally.

It is useful when the site or app has

many pages in many categories,
possibly in a hierarchy with three or
more levels. You want to expose
most of these pages to people
casually exploring the site, so they
can see what’s available.
 Tabs 'Card Stack'
Problem:
There's too much material on the page. A lot of controls or texts are spread across the
UI, the user's attention becomes distracted. You can group the content into Titled
Sections, but they would be too big to fit on the page all at once. You want to allow
users to navigate to these various levels from one point on the user interface. Finally
users don't need to see more than one section at a time.

Solution:
A common solution to this design problem is to use a tabbed document interface, also
referred to as a 'card stack pattern'. In this pattern, labeled 'cards' or tabs help to
structure content into separate sets of links (Put sections of content onto separate
panels or "cards," and stack them up so only one is visible at a time; use tabs to give
users access to them.)
Module tabs
Present information on the
same page, usually within a
fixed panel, allowing the
user to operate without
having to navigate to other
separate sections of the
user interface.

[Link]
Navigation tabs
Almost exclusively placed along the
top-level navigation bar of websites,
offering small, clickable labels that
open content in a new webpage.
Use when you want the navigation to
fill the entire width of a page.

They help keep the user interface

free of clutter. Each tab navigates the
user to a separate webpage, which
can contain an enormous amount of
information; they may also contain
links or other user interface design
patterns that take the user to further
content

[Link]
 Pagination
Problem:
You are dealing with a large set of ordered data that is difficult to display on one page,
but the user may need to view specific items from this set.

Solution:
This user interface design pattern is what we designers use to save site visitors from
being overwhelmed by a mass of data on one page – we take that ‘continental’ chunk
and splinter it sensibly into ‘islands’, literally distinct pages which users will be able to
devote their attention to without sighing in exasperation
It make the way easy for
users to navigate, no matter
the size of the material. It
features in most search
engines and websites, so
users will be familiar with it as
a means of navigation. Once
users have reached the end
of the items listed on a
particular page, they can use
pagination to navigate to
another group of items.
Therefore, pagination acts as
a page break, leaving the
users to consider their next
move and providing them
with the means to jump from
one set of items to another
3-AFFORDING FLUID NAVIGATION
 Global (Top-Level) Navigation
Problem:
Presenting the user with a number of groups of content that fall into distinct categories,
but displaying everything on one page would place great strain on the user and might
give the wrong impression that information lower down the page is less important than
content nearer the top. And they need to be provided with some means of navigating
between content and returning back to their starting position.

Solution:
Global navigation is a region where buttons, links, search bars, or any other design
element affording movement from one set of content to another exist and it appears
identically across all different pages. It’s the ‘steering wheel’ of any site.
 Global navigation bar is a well-established convention, so users expect it there and it is visible to users
from every page. It gives them an overview of the UI and helps them find what they need in it and it also
facilitates exploration and easy movement by putting each section only one click away from anyplace
else. Should show what section the user is currently in.
 Breadcrumbs
Problem:
The user needs to know their location in the website's hierarchical structure in order to
possibly browse back to a higher level in the hierarchy by providing direct links to return
to the various levels of the site visited.

Solution:
Listing the different levels of the site hierarchy users have visited, they can trace their
steps and navigate directly to any one of these levels by simply clicking one of the
breadcrumb links.
It is important to understand that breadcrumbs do not represent actual steps taken but
rather the hierarchy of a website or application.
 As the user progresses deeper and deeper into the hierarchy of a site, breadcrumbs become more
important as they present a simple, highly visible and instantly accessible way of navigating back
through the higher levels. it also provide users with important contextual information, which is useful
when they have arrived from some outside source such as a link from another site or a search engine.
It is separated with a special character as ( », \ or >).
 Search box
Problem:
The user needs to find the answer to a query, locate a particular word or item within a
large body of text, locate a file within a system, or jump to a particular option within a
list. Manually scanning would take a long time, and the users might not find what they
are looking for.

Solution:
Search box or search field is a common graphical user interface design element. For a
search box to be effective, it needs to be designed with attention to its findability, and
the cues it gives the user as to what can be done with it. It is a relatively problem-free
design pattern that can help you create supportive user experiences.
Search fields are an important time-
saving design element that should
always be provided when the user is
dealing with a complex program or
website with many different sections,
pages, categories, options, or
groups of content.

[Link]
 Inline Linking
Problem:
While going through a text or other section of a website, users may come across words
or phrases they need additional information on. They may need an explanation of the
meaning of a term, or they may want to read some additional background on an event
you mention.

Solution:
Certain words in website are underlined and colored. When clicked, these hyperlinked
words and terms divert users to another page containing related information. This
design feature is referred to as 'Inline Linking‘. This is a handy design element as it
ensures clutter in the user interface is kept to a minimum, while providing interested
users with the immediate means of following links
Inline linking empowers users as
• They reduce screen clutter by
keeping web page information
specific to a certain thread or topic
without veering off onto other
topics mid-sentence.
• They afford instant and fluid
navigation to other web pages that
contain more specific and detailed
contents.
A page featuring text set out in this
way saves you from having to break
the user’s train of thought with many
asides in parentheses. That way, you
can stay focused on the big picture of
what you want to achieve on a page,
and leave the explanations of the
smaller components to expert
sources.
[Link]
 Sitemap Footer
Problem:
When users reach the end of a webpage, they will probably want to navigate to another
section that interests them, or return to a section they were reading before they dived
into a specific task. If there is no means of navigation in the footer, they will have to
return to the top of the page to use the navigation options available there. This will add
to the effort needed from the user.

Solution:
Include a sitemap in the footer of every webpage, so when your users reach the end of
the contents, there is a highly visible and instantly accessible navigation tool waiting to
help them move freely around the website.
 Sitemap footers are what we designers use to provide users with links to sections of the website, or outside
websites/webpages, that are important to all users regardless of their current position within the site hierarchy.
In this respect, they act in a similar way to the global navigation section of a webpage.
[Link]
[Link]
[Link]
Thank You