usability & ui (2010)

40

Click here to load reader

Upload: mirco-pasqualini

Post on 05-Jul-2015

263 views

Category:

Technology


3 download

DESCRIPTION

Web and Platform UI Good Practices

TRANSCRIPT

Page 1: Usability & UI (2010)

UI Design

Usability Suggestion BETA

Mirco PasqualiniDigital Creative Director

@ 2009 v1.2

1

Page 2: Usability & UI (2010)

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

Page 3: Usability & UI (2010)

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

Page 4: Usability & UI (2010)

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

Page 5: Usability & UI (2010)

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

Page 6: Usability & UI (2010)

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

Page 7: Usability & UI (2010)

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

Page 8: Usability & UI (2010)

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

Page 9: Usability & UI (2010)

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

Page 10: Usability & UI (2010)

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

Page 11: Usability & UI (2010)

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

Page 12: Usability & UI (2010)

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

Page 13: Usability & UI (2010)

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

Page 14: Usability & UI (2010)

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

Page 15: Usability & UI (2010)

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

Page 16: Usability & UI (2010)

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

Page 17: Usability & UI (2010)

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

Page 18: Usability & UI (2010)

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

Page 19: Usability & UI (2010)

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

Page 20: Usability & UI (2010)

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

Page 21: Usability & UI (2010)

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

Page 22: Usability & UI (2010)

������(��+���!(*

���������� ��*!&���&!%�+!'&��')�+)�&*!�+!'&��)'%��+!'&��,++'&�+'�+ ��.!&�'.�'(+!'&*��� !*��(()'�� �.')#�����,*���!*��$��+ ����+!'&��,++'&�. �&�+ ��.!&�'.��'(+!'&*�!*�'(�&��&���,!���+ ��,*�)�+'��'&+!&,�� !*��/(�)!�&���

������������� ����������,*��-!*,�$�&� ')*��$'*��+ ����)'$$���)�(�����')�!&�!��+���+�. �+�('*!+!'&��)��$'��+���+ ��%�!&���"��+*�'��+ ��(���*�$!#���*�1� �)+!�$�*�('*+1� )�$�+���$!&#*1� �'%%�&+*

�� ������� ��������� ���&,��)'(*��'.&��&���',&��*���$!++$���!+�����)� ���)��/(�&�*�!&+�$$!��&+$0�'&�����+!�-�+����&��� �&����'$')�

��������������� �� ��*��)� �!&�+ ��(�����'&2+�()'-!����$.�0*�+ ��*�%��)�*,$+���,+���(�&���0�+ ���*�)� /(�)!�&����&'.$������&���)'%�. �+�(����!*�($�0

�� ���� �� �������������������������)'-!���+ ��*�%��('*!+!'&�'���$$��,++'&*�.!$$����,*��!&�%�� �&!����+!'&�

��)����*�%($��'��� )'%���)'.*�)����� ��,++'&��,+�+ ��*�%��+ !&�*�.')#��')�� '+'�-!��'���$$�)0�

Page 23: Usability & UI (2010)

������#��'����#&

�����������������������&#��,�'���%�&(�'�(!��%��%"(#������&

�� ������������������� ����� �������������!�'����"% ��!#('��"+�(&�������%�!'��"�"%�"��'�+'��!���"+��"%��+#���!����'����"+�*�&���%���,����'���"%�!"�����'���"!��"�(&������&��"%%��'���!�"%%��'���'���

������������������"%��!,���'�"!��,�(&�%��"!.% �*��'�����"� �%����&� #���*��%�����&���"!�!( ��%�"��,"(%��%���'���%���'��������'��'�*�������%��,"(��%���!#('�!���!�'����"% ��"+�

���������������"��!�"����'�#%")������*�,&����'�"!-� �"�!-� ���!�(#-� ��&&*"%��%��")�����&*�'����%" �"!��'"��!�"'��%�"'�'��&��&�'(�'�"!�*������� "%��$(����,�#"&&����

Page 24: Usability & UI (2010)

����

��'�

�+��

� '*

�����������������������%��%��.��)��/&,���%�)��,���+���� *,�#�%& ����)��+ %����!��+���#��+&�� *'#�/�$,#+ � %�&)$�+ &%*� %���&%��+ $�� %�+� *��&&��*�$'#��� *'#�/�+����)&�)�**���)��'#�/��'�,*����&%+)&#�*��"�)��%��*" '���+ &%�

������������) -���%��)��,���+��� %',+��))&)�����,*�)�%����+&����*,)��+&� %',+�+���) ��+�+� %�*�����,*���%/�.)&%��.&)�����&$����%�.��#�$�%+�

��������� �����)&- ����%���� + &%�#�%�- ��+ &%�$�+�&���+�+���$�%,*��� +���$� %�$�+�&��. ##�+�������&� ��#��

�##&��+ &%�&���&%+�%+��� ����*��&%��)/�$�+�&��. ##����+����

$�)"�+ %����$&*+�)�(,�*+��&%+�%+

����������� ��/&,�,*�� ���%�- ��+ &%�)�$�$��)�+&�� *�'#�/���������&&#+ '�&%��&##�-�)�

Page 25: Usability & UI (2010)

���

����

� ��

����

���������� �������������������������!�����%����������� ���������$�#� ���!�������������������� ��������������������

����%�!���"�� ��������%� ����� �"� %����%�!���������#���� ���!�����#�%��������"�� �"��!����������� ����

������������ ����������%� ����������� �"� %� ������ ������!�� ������� ������ ����!������� ����! ��������� �� ������! ������� �� � ��#���� ���!�������!�� �������������������������� �������������������!��� �����������������������������%������!����%��� ���� ������������"����

Page 26: Usability & UI (2010)

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

Page 27: Usability & UI (2010)

•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

Page 28: Usability & UI (2010)

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

Page 29: Usability & UI (2010)

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

Page 30: Usability & UI (2010)

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

Page 31: Usability & UI (2010)

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

Page 32: Usability & UI (2010)

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

Page 33: Usability & UI (2010)

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

Page 34: Usability & UI (2010)

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

Page 35: Usability & UI (2010)

�����8SGDWH�7LSV

2010-2011 UI Tips integration

Page 36: Usability & UI (2010)

�����8SGDWH�7LSV

/RJLQ�2EMHFW8VLQJ�DQLPDWLRQ�IRU�WUDQVLFWLRQ�IURP�$FWLRQ�EXWWRQ�WR�WKH�ZLQGRZ�RSWLRQV��7KLV�DSSURDFK�ZRUN�EHFDXVH�GLVHEOH�WKH�DFWLRQ�EXWWRQ�ZKHQ�WKH�ZLQGRZ��RSWLRQV�LV�RSHQ�DQG�JXLGH�WKH�XVHU�WR�FRQWLQXH�KLV�H[SHULHQFH�

9LVXDO�SDJH�DQFKRUV061%&�XVH�YLVXDO�$QFKRUV�FORVH�WKH�6FUROO�EDU�SDJH�IRU�LQGLFDWH�DW�ZKDW�SRVLWLRQ�DUH�ORFDWHG�WKH�PDLQ�2EMHFWV�RI�WKH�SDJHV�OLNH�DV���� DUWLFOHV�SRVW�� UHODWHG�OLQNV�� FRPPHQWV

)RFXV�RQ�DFWLYH�REMHFW0HQX�GURSV�GRZQ�DQG�ERXQFHV�D�OLWWOH�ELW��6HDUFK�EDU�H[SDQGV�LQWHOOLJHQWO\�RQFH�DFWL�YDWHG�DQG�FKDQJH�FRORU�

,QWHOOLJHQW�6HDUFK7KH�VHDUFK�LQ�WKH�SDJH�GRQ¶W�SURYLGH�DOZD\V�WKH�VDPH�UHVXOW��EXW�GHSHQG�E\�WKH�8VHU�([SHULHQFH�.QRZOHGJH�DQG�IURP�ZKDW�SDJH�LV�SOD\

0HFKDQLF�DFWLRQ�DQG�%XWWRQ�3RVLWLRQ3URYLGH�WKH�VDPH�SRVLWLRQ�RI�DOO�EXWWRQV�ZLOO�EH�XVH�LQ�PHFKDQLF�DFWLRQ�

+HUH�D�VDPSOH�RI�&KURPH�%URZVHU�&/26(�EXWWRQ�EXW�WKH�VDPH�WKLQJV�ZRUN�IRU�3KRWR�YLGHR�*DOOHU\�

Page 37: Usability & UI (2010)

�����8SGDWH�7LSV

*URXS�LQ�VHDUFK�UHVXOW'LVSOD\�WKH�UHVXOW�XQGHU�JURXS�ODEHOV

'LIIHUHQW�9LVXDO�VW\OH�IRU�GLIIHUHQW�VWDWXV,Q�WKH�)RUP�LQSXW�ER[�XVH�GLIIHUHQW�FRORU�RI�WH[W�DQG�ER[�IRU�H[SODLQ�LI�WKH�ER[�ZDV�DOUHDG\�HGLWHG�RU�QR��LI�WKH�RQ�)RFXV��LI�LV�FRUUHFW��LQFRUUHFW��HWF��

&RQ¿UP�XVHU�DFWLRQ)RU�DQ\�DFWLRQ�E\�XVHU�FRQ¿UP�ZKDW�KH�GR�+HUH�D�VDPSOH�ZKHUH��EDVHG�RQ�QXPEHU�RI�\RXU�FUHGLW�FDUG��WKH�8,�GHWHFW�ZKLFK�FDUG�\RX�DUH�LQSXWLQJ�LQ�WKH�IRUP�ER[�

/RJLQ�2EMHFW7KH�ORJLQ�REMHFW�SURYLGH�DOZD\V���DFWLRQ��� -RLQ�� 6LJQ�XS�� 3DVVZRUG�UHFRYH7KH�VZLWFK�IURP�RQH�WR�DQ�RWKHU�RW�WKHVH�VLWXDWLRQ�ZLOO�EH�PRUH�TXLFNO\�SRVVLEOH

Page 38: Usability & UI (2010)

�����8SGDWH�7LSV

5HGXFH�WKH�9LVXDO�1RLFH:KHQ�DQG�ZKHUH�\RX�FDQ�UHGXFH�WKH�9LVXDO�QRLFH�FUHDWLQJ�2EMHFW�DEOH�WR�GLVSOD\�PXOWL�LQIRUPDWLRQV�LQ�D�RQH�WLPH�,Q�WKLV�JRRG�VDPSOH�GLVSOD\�WKH�3URJUHVV�EDU��SOD\��SDXVH��FRQWURO�VHHNHU�DQG�VNLS�DFWLRQ�

$XWRFRPSOHWH'ULYH�DQG�UHGXFH�WKH�,QSXW�(UURU�7KH�XVHU�QHHG�WR�EH�VXUH�WR�LQSXW�WKH�ULJKW�WKLQJV�EHFDXVH�DQ\�ZURQJ�ZRUG�EHFRPH�D�QHZ�HOHPHQW�

0XOWL�QDYLJDWLRQ3URYLGH�DQ�DGGLWLRQDO�QDYLJDWLRQ�PHWKRG�DW�WKH�PHQXV���� WKH�PDLQ�PHWKRG�ZLOO�WKH�EH�/RJLFDO��

DOORFDWLRQ�RI�FRQWHQW��� 7KH�VHFRQGDU\�PHWKRG�ZLOO�EH�WKH��

PDUNHWLQJ���PRVW�UHTXHVW�FRQWHQW

,FRQ�7RROWLS,I�\RX�XVH�,&21�QDYLJDWLRQ�UHPHPEHU�WR�GLV�SOD\�D�7(;7�7RROWLS�RQ�5ROO2YHU�

Page 39: Usability & UI (2010)

�����8SGDWH�7LSV

1RWL¿FDWLRQV7KH�)DFHERRN�LFRQRJUDSKLF�XVHG�E\��)DFHERRN��WKH�UHG�ER[�ZLWK�QXPEHU��LV��EHFRPH�D�VWDQGDUG�LFRQRJUDSKLF�

:KHQ�\RX�KDYH�WR�GLVSOD\�WKH�DFWLYLW\�LQ�\RXU�DSS�RU�ZHEVLWH��XVH�DOZD\V�D�UHOHYDQW�YLVXDO�DQG�SRVLWLRQ�

,Q¿QLW\�SDJH�OLVW)RU�GLVSOD\�WLPHOLQHG�DFWLYLW\�WKH�PRVW�IUH�TXHQW�SDJLQDWLRQ�PHWKRG�XVHG�LV�WKH�DXWRORDG�FRQWHQW�7KH�DXWRORDG�VWDUW�WR�ZRUN�WKH�XVHU�IRFXV�WKH�HQG�RI�SDJH�DQG�UHORDG�WKH�VHFRQG�SDJH�EHFDXVH�WKH�VFUROOSDJH�LV�PRUH�IULHQGO\�DQG�TXLFNO\�LQWHUDFWLRQ�FURVV�GHYLFH�

Page 40: Usability & UI (2010)

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