UX LIBRARY

Navigation.
Sliders
Sliders (not carousels!) work especially well for progressive or closely related pages. If
you have only a few elements to go through, sliders are a great navigation tool.
Downside: Sliders have a very limited range. If you’re navigating between more than 6
or 7 pages, the slider will become harder to navigate.
For example
The Uber app
allows users to
navigate between
different types of
services. The
beauty of Uber’s
slider is that users
can use the same
context (map
view) for each
type of service.
Pictorial Icons

Pictorial icons is one of the most interesting solutions to the problem of saving mobile
screen space. The picture on the icon should explain where it will take user. . This
makes navigation simple and easy-to-use, but still with enough freedom to separate
you from others.
Downside: Many researchers have shown that icons are hard to memorize and are
often highly inefficient. Only universally understood icons work well (e.g. print, close,
play/pause, reply, tweet). That’s why it’s important to make your icons clear and
intuitive and introduce text labels next to the icons.
For example
Tumblr application has both nice pictorial
icons and proper labels for them.
Card Grid

Cards are fast becoming the best design pattern for mobile devices. Card UI is
driving the web away from many pages of content linked together, towards
individual pieces of content aggregated together into one experience.
Downside: Sometimes hierarchies are good — complex processes often benefit
from guiding users along a path rather than allowing them merely to wander
randomly. Also Card UI format should encourage content exploring.
For example
Pinterest and many other popular services are built around cards.
Full-Screen Menu
While many apps and sites are struggling to minimize the space their navigation
systems take up, the full-screen pattern takes the exact opposite approach. It
unobtrusively dishes up lots of data, neatly displaying text and multimedia and at the
end it has one major benefit — it is very easy to use.
Downside: You won’t be able to display any other content on the home page, except
the menu itself. Also click/tap requirement for showing a content isn’t good in most
cases, because it’s one more user interaction before an actual result.
For example
Cookly has a massive navigation
system with menu that takes up the
whole screen in order to handle
image links more efficiently. The
simplicity of the navigation ensures
that the user will get where they
want to go.
UI LIBRARY
User Interface elements
Information Components
Notifications
A notification is an update message that announces something new for the user
to see. Notifications are typically used to indicate items such as, the successful
completion of a task, or an error or warning message.

Progress Bar
A progress bar indicates where a user is as they advance through a series of steps
in a process. Typically, progress bars are not clickable.
 Tool Tip
A tooltip allows a user to see hints
when they hover over an item
indicating the name or purpose of
the item.

Message Boxes
A message box is a small
window that provides
information to users and
requires them to take an action
before they can move forward.

Modal popup
A modal window requires users
to interact with it in some way
before they can return to the
system.
Navigational Components
Search box
A search box allows users to enter a keyword or phrase (query)
and submit it to search the index with the intention of getting
back the most relevant results. Typically search fields are single-
line text boxes and are often accompanied by a search button..

Breadcrumb

Breadcrumbs allow users to identify their current location within

the system by providing a clickable trail of proceeding pages to
navigate by.
Pagination
Pagination divides content up between pages, and allows users
to skip between pages or go in order through the content.

Tags
Tags allow users to find content in the same category. Some
tagging systems also allow users to apply their own tags to
content by entering them into the system.
Slider

A slider, also known as a track bar, allows users to set or adjust a

value. When the user changes the value, it does not change the
format of the interface or other info on the screen.

Carousels
Image carousels allow users to browse through a set of items and
make a selection of one if they so choose. Typically, the images
are hyperlinked.