ui design, usability suggestions
DESCRIPTION
TRANSCRIPT
UI Design
Usability Suggestion BETA
Mirco PasqualiniDigital Creative Director
@ 2009 v1.2
1
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
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
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
Linking
ConformThe 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
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
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
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 youwant 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
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
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 NamingLike 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 MenuIn 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
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
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 ScrollOpted 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
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 ButtonUse an Icon with text to better explain the action of the link. Translate virtually what theicon 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
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.
!"#$%&"'#(")#*$
+#,(-).
/0*)1#(2)%
3"4*5.-1
6-",1#$-.
3789:;<=
>;;89<
?@&A/!"4B-)01"C-
?*C"1%>--,
7,'-4)#.#$(
35.)*D-%>--,
/5((-.)#*$
Here a sample from Strategies Driven Marketing Wireframe to Final Design LayoutHere a sample from Strategies Driven Marketing Wireframe to Final Design Layout
14
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
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
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 rulesThe Call2Action follow specific design-style rules:1. The Call2Action are NOT PART of main interface navigation of website2. The Call2Action need the same design style in all over the site3. The Call2Action will be placed OVER the website design page4. 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 identification6. Use short and clear Label-Text
Use Call2Action when neededThe 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 going2. Place the Price Promotion close or in the begin of the same product sector line3. 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
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
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 boxUse 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 AlignmentMake 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 selectionMake easy complex selection like as Calendar-data input with a pre-build graphical calendar.
Evidence of wrong inputBe sure to explain to the user where the input data is wrong and why it is wrong.
Search boxwhenever possible filter the search action data before displaying the results if querying into a large database.
Live search with suggestionUse 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
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
E-CommerceProducts always visible and protagonistThe 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 hiddenEvery time we talk of money in our web site it will be easy to identify, clear in thegraphics style and managed with a right margin around it, preferable on whitebackground.
Cart and shopping tool-link always visibleAlways 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 statusExplain 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
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 navigationYour 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 itPlease 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 momentMost 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
•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
by the type of content. In this case where we talk the
highlights of products the page offer big image just for
take the attention of users
Into Technical Specs the page is more textual
oriented
23
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 NavigationCreate 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 ...... observe the page design to understand if the hierarchy ...
24
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
Draw your wireframe sketch page
and identify the compartment Design any page a take a global
vision for have an optimization
Identify functionality and site
workflow
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
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 logo2. Main navigation menu3. Secondary Navigation Menu4. Site function button always present in each page5. Login,SignUp action6. 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
Interactive Generic rules
Attract, Interact, React This is the main rule of any interactive project. The interactive process is created whenwe 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 seconds3. 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
page work with an image driven
for Attract
All the site inside moving from
an image-driven navigation at
the top to contextual text in the
depth Interact
The scope of each page is
moving to the Apple Store and
finalize the workflow. React
Easy, Easy and CleanThe 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 FunctionThe first rule of each designer in the world: the form is equal to the function that form require to do.
28
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 TransitionsInstead 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
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 sampleThe 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
Last thing...
Beauty equal orderWhat!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: [email protected]
Skype: mircostudio
LinkedIn: http://www.linkedin.com/in/mircopasqualini
Versione 1.2
31