Web and Platform UI Good Practices

1. UI Design
Usability Suggestion BETA
Mirco Pasqualini
Digital Creative Director
@ 2009 v1.2
1

2. Breadcrumbs
Use Corresponding Labels
Make sure your crumbs are called the same as the corresponding location, for example
do not call a crumb “Personalize” if the page is called “Settings”.
Aid Navigation, Not Replace It
Your crumbs should act as a way for users to locate themselves on your site when they
arrive and not as a replacement for navigation.
Don!t Link to Current Page
The very last crumb in your breadcrumbs should not be clickable. It should simply serve
as an indication of where you are within the site. Linking to the current page is generally
discouraged.
Amazon!s take on breadcrumbs.
They are located at the top of the
page with the last crumb not
click- able.
Apple!s take on breadcrumbs.
They are located at the bottom of
each page without last crumb.
This is an alternative used in
complex technical website, where
each Breadcrumbs are clickable
drop list with FILTER or other
LINKS placed at the same level
of that selected.
2

3. Tabs
The tab metaphor is one of the only metaphors from the office that work really well on
screen. It has been adopted widely, both on the web and in software interfaces.
One Row of Tabs
The best way to implement tabs are to have only one row of them. When we stack tab rows on
top of each other, the interface will become cluttered and the user will have a much harder time
to navigate and distinguish between tabs.
Please note that this is not the case when the bottom row of tabs have an hierarchical
relationship with the top row. In that case two rows of tabs are fine, but be sure to indicate that
the bottom row is directly related to the top row. Make them visually distinct.
Short Labels
It is important to label tabs but keep tab labels short, using two or three words at most.
Active tab indication
Clearly indicate which tab is currently active. This can be done through various ways, color
indication works best.
Home Page Tab
There is an age old discussion on wether the Home page (if you have one) should have a tab or
not. Cases and situations vary but I believe that the home page should indeed be a tab.
The reason for this is that it corresponds with the users idea of the site. The counter argument is
that it doesn!t correspond with the structure of the site but this shouldn!t be an argument: your
users do not care about the structure and in all likelihood, they don!t know what it is.
Tabs Should Be Tabs
Tabs should not be a replacement of breadcrumbs, meaning that
the first crumb shouldn!t be removed withbeing represented by the active tab.
3

4. TV Sorrisi&Canzoni use a TAB
Menu for main navigation with 2
row on the same level for identify
2 different main content group
Apple use TAB method for filter
the link groups.
In some web Application TABs is
used for filtering the view results.
In Inkd site the TABs use a drop
list menu for a quick access to
the content.
Fantacast use vertical TABs for
webmercial box
In other case the TABs is used
too for switch view box or picture
and working like as a button.
4

5. Linking
Conform
The best approach for links are to follow standards. Links should preferably be
underlined and making them blue won!t hurt either. Visited links should also be indicated
as such.
Easily Identifiable
Links should be clearly identified. If you do not want to underline or make them blue,
make sure they are visually different from surrounding content. They should stand out.
Be careful though, no one wants to read a passage littered with highly visual and
distracting links. If the link is a button or a image, make sure it changes it!s state when a
user hovers over it.
An exception to this is the logo or homepage link, located at the top of your site.
Through the years we have come to expect that clicking on the logo will take us to the
home page.
Spacing
Make sure you leave enough space between links to avoid users clicking the wrong link.
New Tab or Not?
Should a link load in a new tab? Arguments can be found for and against both options.
The context of the link is an important factor in deciding this. If a user isn!t likely to want
to navigate away (permanently) from the page, let links open in a new tab.
PDF!s are also best shown in new tabs. If you are linking local content in your site, stay
away from links opening in a new tab. It is better to let users decide wether to let a link
open up in a new page or not than to force this decision on them.
5

6. Amazon use a standard blue
underline link style.
In this case the LINKs use always
a custome Color without
underline.
In this case the links don!t have a
specific color but they have a
underline style.
In this case and ICON element is
added for evidence the LINKS
use the same colors of
mainstream text.
Think to link be easy to click and
select with a mouse pointer or
and finger of your hand.
Remember the space around.
Add icon before or after for
specific the action. Wikipedia for
sample use icon for explain
Internal or external links.
Use clear and easy name to
remember the links
6

7. Indicate What is Being Linked To
I am not talking about preview thumbnails of links but more about small visual
indications: icons or preferably text, when applicable. Heavy content such as mp3!s or
PDF!s should be indicated as such. Also avoid naming links “click here”. It tells
me nothing about the link and requires blind faith on the part of the users.
URL Shortening
The usage of services that shorten your URL like tinyurl is a tough question. Although
shortening the URL might look better, it gives the user no idea of what is being linked to.
The context is also important. If I am not likely to type the URL, I wouldn!t care if it is too
long. The flip side is that when users make a printout of your site, URL shortening is
preferable.
URL Usability
Note that not encouraging services like tinyurl does not mean you should ignore URL
length or naming, to the contrary. The
best scenario would be for your users to guess what page they are on, simply by
looking at the URL, especially if they are accessing major subsections of your site.
In-page Links
Try to stay away from in-page linking (anchor tags). This does not conform with the
users model of a link. We expect a new page and not a new location within the current
page.
Email Adresses
At all costs, avoid the mail-to link unless the title of the link is an email address. Clicking
a link and seeing a mail client open instead of a new tab is not expected by the user.
7

8. Overlay
Breaks Convention
I would advise you to use an overlay sparingly. However cool they may seem, like
linking within a document, they do not conform to our mental model of a link. If you
want to use an overlay, ask yourself wether the user might want to open that link
in a new, dedicated tab. If the answer is “no”, you can consider an overlay.
System Critical
A good time to use an overlay is when you need system critical feedback from a user
(which shouldn!t be that often ). This might be the case when, for instance, you have to
login to access certain information.
The window used for “System Critical message” need be very different from website/
application Look&Feel and understand immediately is an guest element into the
monitor.
8

9. Apple site use Floating window
for picture-zoom or details
description. All the float windows
show a clear CLOSE Action and
a BLACK SHADOW for explain
his OVER position
In this sample the CRITICAL
WINDOW show a completely
different look&Feel from the
website
Facebook add the Black-
Transparent border for indicate
the CRITICAL windows.
9

10. Drop Down Menu
Mimic OS behavior
When you are implementing a drop down menu in your site, it is best to completely copy
operating system behavior.
Beware of Hiding Underlying Content
By nature drop down menus, when active, covers other content. Take care of how long
a menu is and what it is covering when open.
Consistent Naming
Like breadcrumbs and tabs, take care that you name your menu items and pages
consistently.
Never Nest
Avoid nested menus at all cost. They are hard to navigate through, especially on the
web. If you must, stick to two layers of menus.
Navigable Drop Drop Menu
In the latest years a new trend of menu is create Navigable menu. When the drop box
open, the site propose at the User quick map of section/options sometime integrated
with description or interaction.
10

11. NetworkSolution use a Navigable
Drop Down Menu.
Digg site sample. In this case is a
perfect use of Consistent
Naming
SAAB use a visual Navigable
menu with thumbnails on TOP
VW use a vertical drop-list menu
11

12. Scroll
Never Horizontal Scroll
In the Western world we read from left to right, top to bottom.
Because of this, scrolling horizontally is not easy. Take care that your users screen
resolution is wide enough for your site.
Stick to Operating System Defaults
Styling your scrollbar should be avoided. A user will recognize his system default
scrollbar much quicker than a styled scrollbar.
Hide Scrollbar When Necessary
When a scrollbar is not needed, hide it. Seeing a scrollbar when there is nothing to
scroll will confuse users.
Avoid Nested Scroll-bars
Scroll-bars within a page should be avoided. The only real excuse to use this is when
scrolling the entire page is not preferable and the focus should remain at the top
Strategies: Freehand scroll to Driven Scroll
Opted for divide the content in more Slides or step when possible and leave the
FreeHand Scroll and use a driven Scroll. A good sample of this case are the Carousel
mode.
FORD use a Driven Scroll
method in his COMPARE Tool
Globo use a Driven Scroll with 3
main button.
Apple use a drive scroll mixed
with a freehand scroll method for
a product carousel
12

13. Icons
Icons versus Labels
The problems with icons are that when they don!t work, they really don!t work. Labels on
the other hand, are much less likely to confuse, even if they are bad. Icons are also
much more labour intensive to create. A picture is also much more ambiguous than a
word and pictures can mean different things in different cultures, so take care when
using icons.
Stick to a Family
If you use icons, stick to a family. Line them all up and ask yourself wether they could be
related. It is not just the colors of icons that make them look alike, but also their shape,
light reflection and texture.
Icon with Text: Storytelling Button
Use an Icon with text to better explain the action of the link. Translate virtually what the
icon should say so that they can read it and understand.
A set of the Tango icon library,
with strict guidelines.
In this case 3 button used with
Icon
13

14. Content
Title
Hierarchy Important
Do the squint test and if your titles are not easily identifiable, take another look at your
text hierarchy. Your titles should be strong. The use of Serifs and or less legible fonts
are acceptable in titles. This speaks for itself, but keep a title close to the top of the
page. Make it one of the first things you see after the top navigation.
!"#$%&"'#(")#*$
+#,(-).
?*C"1%>--,
/0*)1#(2)%
3"4*5.-1
3789:;<=
7,'-4)#.#$(
6-",1#$-.
35.)*D-%>--,
?@&A/
!"4B-)01"C- /5((-.)#*$
>;;89<
Here a sample from Strategies Driven Marketing Wireframe to Final Design Layout
14

15. Splash Screen
Obvious
This should be easy for everybody: stay away from splash screens at all times. The user
wants content, not a welcome message. I can!t think of any justifiable reason to use a
splash screen.
Body Text
Text Length
Writing for the web is a whole different thing than writing for print. The discussion about
the differences between print and screen has been going on since the computer screen
was invented but one thing that is sure is that users want smaller pieces of text. They
hardly ever read an entire page, instead, they scan for keywords.
Leading
As with print design, take a look at your leading. This is more tricky than it sounds but
try to find the right balance. A good starting point would be 12px leading or more for a
font size of 10px.
Width
This is one area where print is vastly different from screen, on a computer it is never
certain what the size is of the screen of the user. This poses a problem for the width of a
piece of text. I would suggest a length of between 12 and 16 words per line and
a fixed text width layout.
Fonts
Market Penetration
Another area where print and screen differs immensely is fonts.
In order for your page to display correctly, take a look at the market penetration of fonts.
Sure bets are Tahoma, Arial and Verdana (both designed especially for on-screen
usage), both with more than 90% availability on OS X and Windows.
New trend and new font device
Another font set used most everyday is the set: “Lucida Sans Unicode, Lucida Grande,
sans-serif”
Serif versus Sans
Serifs are far better for print reading than Sans Serifs. This all has to do with how your
screen displays fonts. Recently there have been Serif fonts designed for screen use,
most notably Georgia.
15

16. Video
New
The massive increase in bandwidth has made delivering video content online a much
more viable option but video on the web is relatively new, leaving much room for errors,
also making it very interesting for usability folks to keep an eye on.
Usage Context
When using video online make sure it is actually the right solution. Take a critical look at
your message and ask yourself wether it is actually delivered best through video. Users
get distracted much faster online than in a different context and lengthy boring videos
won!t attract many users.
Delivering Format
For delivering video content online I would recommend using Flash. In addition to being
cross platform Flash has a very high market penetration. Adobe statistics state that
Flash 9 penetration in December 2007 is 95.7% in mature markets, making it a perfect
tool for delivering video content.
Now, with the mobile device penetration and diffusion of new standard video format
H264 (video codec name), the most supported format is the MP4, playable from any
mobile device, computer, consoles and Flash Player too.
Distracting
Watching a video is an activity that differs from other web activities in the sense that it
requires you to keep looking, without pausing, and also (in most cases) keep listening.
When you are simply reading or scanning an article you can look away to do something
else, with video this is not the case. If you want users to be focussed on your video
make sure that there are minimal distractions.
Auto-play or Not?
Sites handle this issue differently. I would suggest to you to let a movie preload but to
not let it play, this gives the user the freedom to decide wether they want to start playing
a clip.
Controls
Once again, stick to what is commonly used. Make sure the user can see how far the
video has loaded and how far it has played.
16

17. Call2Action
Drive the User
The Call2Action are special buttons linked to drive the user into specific site section,
specific tool or play specific action.
Usually Call2Action buttons are used by Marketing-Drive navigation approach or help
user into complex interface to identify the right and more correct action to do.
Design esthetic rules
The Call2Action follow specific design-style rules:
1. The Call2Action are NOT PART of main interface navigation of website
2. The Call2Action need the same design style in all over the site
3. The Call2Action will be placed OVER the website design page
4. The Call2Action can have the same design style maybe can change on colors and
shape for create a hierarchy.
5. The Call2Action need have margin around for an easy visual identification
6. Use short and clear Label-Text
Use Call2Action when needed
The use of Call2Action is the same as a Promotional banner in the supermarket, it will
be placed in the right spot at the right time.
For example, usually the driven marketing rules, a supermarkets seeks to:
1. Place Promotional offer between the lines when the people need to make choices in
what line going
2. Place the Price Promotion close or in the begin of the same product sector line
3. Place the most expensive and not primary products in the center / eye-level-height of
shelves.
4. Place the optional products before the cashier where the people wait in the line
17

18. Sample of Hierarchy Call2Action
Sample of site Primary
Call2Action: Search an Artist...
Sample of good use of Margin
Good use of short auto-talk label
text
An other sample of use the text
labeling into Call2Action buttons
18

19. Form & Search UI
Be easy
Focus of any input Form is to make it easier for the customer. The Form Filling is always
a not liked action to do in website because very often is slow and long-action, boring
and sometime complex.
In some case a good method is to split the registration Form in more depth level and be
completed in different time.
Auto-suggest input box
Use auto-suggest input box in your Form where the empty status specific the type and
the format of content need to be inputed.
Typography, grid and Alignment
Make the Form alignment perfect in any part for a better clean reading and
understanding with large typography use. The Form need be thinked for be used in any
kind of device and Human-Computer interface (Mouse, Touchscreen, Remote Control,
etc..)
Interactive Tool for complex selection
Make easy complex selection like as Calendar-data input with a pre-build graphical
calendar.
Evidence of wrong input
Be sure to explain to the user where the input data is wrong and why it is wrong.
Search box
whenever possible filter the search action data before displaying the results if querying
into a large database.
Live search with suggestion
Use live search in your site and offer a suggestion link result list without performing the
search with a Click in a button or pressing Enter.
Offer the result organized and grouped in category.
19

20. Use suggestion text into the Input
box Form and pre-inputed menu
tool for have less wrong input.
Make always easy and sequential
input box and linear grid
Indicate where is the wrong input
and why it is wrong
Use interactive tool for simply
selections like as Data selection.
Filter and segment the search
before do the action
Use a live search in the site
where is possible for suggest link
result organized into category
20

21. E-Commerce
Products always visible and protagonist
The product being sold will be always the protagonist within the page and into the order
form box and / or row. The product picture selected will be visible from selection (start of
process) to the “Order confirm” (end of process).
Price clear and not hidden
Every time we talk of money in our web site it will be easy to identify, clear in the
graphics style and managed with a right margin around it, preferable on white
background.
Cart and shopping tool-link always visible
Always make the item visible, including a picture, If the user has an item in their cart
make it easily viewable and apparent that there is an item you have or are going to
purchase. This should be easily identifiable from any page within the site that you have
items pending sale.
Clear Workflow steps and status
Explain the steps of the order process by use of easily understood and identifiable
graphics for the customer. Also make sure to identify where the user is in the order
stage. ( Sign-In, Billing & Shipping, Payment, successful order etc..)
Good sample of process order
steps
Good sample of “always visible
product”
Good sample of Customer Online
Assistance
21

26. Good workflow process
Site Architecture
Rules
Use easy to understand tools and symbols when designing your site's architecture map,
Notepad, Word or Pages are an excellent example of easy to use and universal tools
that are capable of doing this.
Organize your site map for Logical aggregation content not for driven marketing rules.
Indicate which is the main navigation site and the link of specific pages placed in the
Footer like as “Privacy Terms, Credits, etc..). The links present in the Footer aren!t part
of main navigation.
Not include in your site map architecture the physical content, paragraph page organization or other kind
of not navigation node.
Grouping and Hierarchy
Where possible create logical group for the content with a hierarchical structure. For
example: Vehicles > Car > Car Model
Create a multilevel knowledge navigation
Your target is to give the user what they want when and where it is needed in the right
place.
For this you need to create a navigation for the content, details will be accessible into
depth and details only when the user wants it.
Main menu
A good rules when you project your website is create 4/5 main label and not more
Navigation and Marketing needs. Don!t confuse it
Please don’t confuse the Logical needs with with Marketing needs. They are not the
same end result and may not have the same formula for solving the issue.
Divide the menu label in logical box content for create e channelization.
The right dress for the right moment
Most important is fit the content into a design style exactly to the situation and content
type. For example, when you sell online a physical products and talking about his visual
highlight, show them and don!t describe with text.
Is most important understand when the content need to be fit with “sport-wear” or with
“Smoking” / “Gala!-Wear”.
22

27. •Home
•Overview
•Pack #1
• Specific
• Gallery
•Pack #2
• Specific
• Gallery
•Pack #3
For Designer don!t use complex site map but easy
and linear site map
A Good solution for the menu grouping.
Apple use different template and page design approach Into Technical Specs the page is more textual
by the type of content. In this case where we talk the oriented
highlights of products the page offer big image just for
take the attention of users
23

28. Focus & Goal for each page
Steps
Identify which are the focus and goal of each page, create a priority list.
Producing a preliminary macro-area wireframe for identify not the content type but the
Marketing navigation, next producing a detailed wireframe and only after proceed to
create the graphic design
Hierarchy and Marketing Driven Navigation
Create a “Story-telling” in each page using hierarchy of information, space and color
and drive the user into a specific page approach and reading.
Cross-eye check
Crossing eyes technics is good for understand immediately if the hierarchy and
marketing area working correctly. The blurred image help you understand where the eye
moving into the reading page
... observe the page design to understand if the hierarchy ...
24

29. Design process
The wire frame should be:
1. Marketing-Driven where you focus on driving the users attention to for the object
being displayed or sold.
2. Content Grid and Logical navigation, where we define the content type, space,
rules, compartment and functions.
The wire frame is really important because it helps you and your client to focus on
functionality and content of the project.
Style and Design Application
Add the graphic design and the style to the page only when you finish the complete
wireframe of website because it help you to have a clear list of GOALs of each page
and a global vision of project.
Don't Make it Complex
The wire frame needs to be completed with all content and functionality accounted for.
Simplify the navigation, make it easy to use, understand and see using good graphical
design.
Always show the product being featured or sold. Images sell, great Images will
talk for you.
Especially in the home page or main product page, use a solid visual image with sub
photos of the product when applicable. If the item being sold is not, or does not have a
physical presence, you must make an icon or symbol to represent the item featured.
You need to make visible to the consumer what might not be physically visible.
Adobe create virtual box for represent his products Adobe too represent his software with Icons
25

30. Draw your wireframe sketch page
and identify the compartment Identify functionality and site
Design any page a take a global workflow
vision for have an optimization
If you prefere you can work with a
paper wireframe and compose your
page
In the left a Marketing-Drive
Wireframe.
Only after have a perfect and
complete navigation wireframe
moving to create the graphic Design
26

31. Interactive Object Labeling
Call2Action
The “Call2Action” buttons are special Marketing-Driven link into the page. Usually this
element force the user navigation into specific section, page or action.
Webmercial
Are call “Webmercial” the main spotlight banner placed into homepage where push and
promote specific section and/or products of website.
Usually webmercial are animated flash or video elements with interaction and sound
FX.
Carousel
Carousel are interactive object focused on rotate in circular picture, banner or other
advertising message with and without the user interaction.
Widgets
The widgets are sharable page object with a specific function. For example offer News/
Rss, Reserved area access, List about most popular posts, Stock market data, Tools,
etc.. The Widget into a web project don!t change their look but change only their
position.
Sidebar
Is considerate “Sidebar” the opposite columns or row to the main content area, where
place filter and category, widgets and other element can help the user into main
navigation.
Header
The web site Header is the area we we usually place the following:
1. Site logo
2. Main navigation menu
3. Secondary Navigation Menu
4. Site function button always present in each page
5. Login,SignUp action
6. Search tool
Footer
Is considerate “Footer” the end of page where are placed usually:
- Quick Site map
- Site Credits, Privacy, terms of use
- Contact Information
27

32. Interactive Generic rules
Attract, Interact, React
This is the main rule of any interactive project. The interactive process is created when
we have 3 status time:
1. Attract: take the attention of the user in 1 second and move him to clicking or
interact.
2. Interact: begin to exchange information and push your message in 2 seconds
3. React: at the end of interaction, make your next action (like as a chess game ) to
maintain the user connection in 3 seconds.
In this case Apple!s site the first All the site inside moving from The scope of each page is
page work with an image driven an image-driven navigation at moving to the Apple Store and
for Attract the top to contextual text in the finalize the workflow. React
depth Interact
Easy, Easy and Clean
The complexity is only a limit of the designer. The easier the interactive approach the
easier it will be to convert your site goals.
Form equal Function
The first rule of each designer in the world: the form is equal to the function that form
require to do.
28

33. UI Finger driven
Screen size
Dimension
Your application should encourage people to interact with device from any side and size
by providing a great experience in all orientations. The reason is that people don!t view
the device as having a default orientation, because they don!t pay much attention to the
minimal device frame and they!re unconcerned with the location of the “Home button”.
Consider Multifinger Gestures
The large device screen provides great scope for multifinger gestures, including
gestures made by more than one person.
Reduce Full-Screen Transitions
Instead of swapping in a whole new screen when some embedded information
changes, update only the areas of the user interface that need it. When you perform
fewer full-screen transitions, your application has greater visual stability, which helps
people keep track of where they are in their task.
29

34. Organic Interface
Human Kind approach
That!s the most important rule for any UI Designer and Architect. The general dynamic
of this argument is “the Interface change his aspect and complexity proportional to
the evolving of User knowledge about the interface”.
The perfect interface is when it will be customized for each user and evolving in the time
for follow the user experience. The user found around him only he need.
Some sample
The low of Organic Interface is study from many years into digital business. For
example from many years in many Microsoft desktop application like as Office Suite and
recently into Adobe Suite, in the application menu, some option are hidden and the
application show you only the main action (some time the most used) at first look. The
user can ask to show all option available only on demand.
Thanks to progress of technology the Apple iPhone realize the vision of many years ago
when the UI Designer understand about the future of UI start from physical products,
where the interface will be change.
The iPhone represent the best application of Organic Design. At the begin to the user
offer only 1 option: “The start Button”. After it show him some other option (applications).
His Human Interface is great because can change basing the use you want do of device
(phone-call, gaming, messaging, etc..)
30

35. 2010-2011
UI Tips
integration

40. Last thing...
Beauty equal order
What!s the beauty? Why the beauty is a personal question sometime?
From many century before christ, was very famous in old civilization the cult of “God
number” call too “Phi”.
The old civilization think existing a natural rapport in any animal or vegetal life in the
hearth can explain the proportion of his form, because is a natural trend of any small
element of life try to organize him-self with other element and found a balance together.
The human too, decode what they see basing on personal culture and knowledge and if
what they see have a good order they define it, beauty.
When we design web, graphics, anything else is the order of the element we place
create a great thing,
For this reason the order and our capacity the organize the element to a specific scope,
from the site architect to the design style is the right step of success.
Web-design Usability Suggestion
Created by Mirco Pasqualini
Contact email: mircopasqualini@me.com
Skype: mircostudio
LinkedIn: http://www.linkedin.com/in/mircopasqualini
Versione 1.2
31