SlideShare uma empresa Scribd logo
1 de 33
Baixar para ler offline
Effective Web
   Navigation
       Design
     Multimedia Design
Instructional Goals
•   Understand basic principles of good
    navigation design in web sites

•   Apply basic principles of good
    navigation design in designing
    websites to achieve usability and
    accessibility

•   Understand some navigation design
    trends in current websites
“Navigation menu is the most signi cant and the most important
element in web design”
If people cannot navigate through your site, they will quickly leave.
Designing effective navigation on website is crucial. But there are some
basic things you need to do before you can start worrying about
rollovers or links, images or ash.
1. Information Architecture
Before you start to plan your navigation, you need to de ne your site’s
information architecture. Information architecture is the taxonomy or
structure of your Web site.

Some common taxonomy elements on a corporate or business
Web page are:

            •   Products - the products or services the company sells
            •   About - information about the company
            •   Investor Relations - information speci c to investors
            •   Support - help for customers
2. Organization

Once you've determined your site architecture, you need to decide
how to organize it. You might have it all live in one directory, and just
link to the major pages from your front page. Or you might have all
the sub-pages separated into directories.

You should think about how your customers might wander through it.
Flow charts and storyboards can help you map out exactly how you
would like to encourage your readers to use the site.
3. Navigation Design

Once you have an idea of the architecture and organization, you're
ready to think about the design of the navigation. There are several
things you should consider in deciding on your navigation design:

          Accessible
          The navigation of your site is possibly the most important part of
          any given page. So it should be as accessible as you can make it.
          This means avoiding special effects like Flash, Java, or JavaScript
          as your only navigation method.

          Meaningful
          Keep your navigation meaningful. Make the links clear - don't try
          to get cute or use terms that are internal to your organization.
          Someone who has never been to your site before should know
          immediately where the link will take them.
Understandable
If you want to use images for your navigation, make sure that there is
some text associated with them. " Mystery Meat Navigation" is the
use of non-descriptive images as navigation, and it's much more
common than you might think.

Prevalent
Your navigation should appear on every page of your site. While
you don't need to have identical navigation, the basic structure
should be the same throughout the site, with changes used only
to indicate location within the hierarchy.
More recent trends in
                                                                          navigation design.
3-D Navigation
Lately, we’ve seen a trend towards design elements that sit on a higher z-plane;
that is, they appear closer than other elements on the page. This trend is
commonly applied, no surprise, to navigation menus.


     Delibar
     The content area on the Delibar website looks like a pile of two
     pieces of paper, with the navigation items holding them together.
     It also features a subtle JavaScript effect that smoothly moves
     them up when you hover over them.
Blue Door Baby
The Blue Door Baby navigation bar is styled like a ribbon that is
laid over top of the feature area. The menu items are text-image
replacements that have a subtle inset-text effect.




Sower of Seeds
The navigation bar on Sower of Seeds looks like it wraps around
the content area, making it stand out for the user.
Mystery Tin
The Mystery Tin navigation menu is arranged vertically. The
active menu item has a background that wraps around the side of
the content area. Similarly, hovering over a menu item shows a
smaller 3-D ribbon.
Speech Baloons
Designing menu items in the shape of speech balloons, or speech bubbles,
appears to be another popular trend. It’s a great way to break out of the
conventional rectangular menu.




    Alexarts
    Alexarts features a background
    of a city waterfront. Navigation
    menu items are in large speech
    bubbles that point to different
    elements of the scene. Hovering
    over a navigation bubble propels
    it slightly upward, a subtle
    indication that it is interactive
    and is the current target.
Bush Theatre
Bush Theatre uses thought bubbles instead of speech balloons,
which in comic books denote the subject’s thoughts.




Rob Alan
Irregularly shaped speech balloons make for a distinguished look
on Rob Alan’s website. The speech bubble opens a groove in the
main content area, which visually connects them.
Kingpin Social
Kingpin Social’s primary navigation menu is hard to miss, with its
big size, rounded corners and copious padding. The active menu
item is highlighted with a speech balloon.




GIANT Creative
Bright colors against a dark background and a generous size
makes GIANT Creative’s navigation stand out from the rest of the
text. Hovering over a menu item reveals the speech bubble’s
pointer.
Rounded Corners
Rounded corners are often used to soften sharp rectangles. The trend has
carried over from call to action buttons to menu items, whose appearance as
buttons is meant to entice users to click on them.

Ballpark
Ballpark’s navigation menu in the top-right uses CSS background
text replacement to add round-cornered buttons to the text.




New Look Media
New Look Media’s blue navigation buttons are striking because of
the dark background.
MetaLab
Rounded corners with graphic icons to the left are featured in this
popular website’s menu bar.




gugafit
gugafit’s navigation buttons change to green on hover. The active
item is given a dark-blue pressed look.
Vistrac
Vistrac’s rounded buttons can only be seen in modern versions of Web
browsers such as Firefox, Safari, Google Chrome and Opera because the
developers have implemented the working draft specifications of the CSS
3 border-radius property. In other Web browsers (i.e. IE 8 and lower: the
browser that’s hindering the progress of Web design), the menu items
appear as normal rectangles.




Viljami Salminen
Web designer Viljami Salimen gives the active items in his
navigation menu a rounded button look.
Icons in Navigation
Over a year ago, we noted that visually appealing icons are increasingly being used, and this
trend has continued. Icons not only are eye candy but help create visual recognition for users.
Having said that, one should keep in mind that it’s always important to keep the loading time as
short as possible, thus making the page as responsive as possible.

mesonprojekt
Karl Francisco Fernandes’ portfolio has a hand-drawn-themed navigation
menu. Icons make the menu items more visual, giving the website a
distinguished look.
Sourcebits
Sourcebits uses small icons for its menu and sub-menu items.
They add intricacy to the navigation.




Duarte Pires
This menu is located close to the content, where it is easy to use.
It uses large icons, which adds a visual element to the
navigation. Also, the menu on other pages uses the same icons
in a vertical layout, bringing consistency to the website. The
icons may not fit perfectly, but it’s a nice idea.
JavaScript Animation
With JavaScript frameworks making it easier for Web designers to create
animated page elements using just a few lines of code, designers have been
using JavaScript lately for more aesthetic than functional purposes.

Andreas Hinkel
The primary navigation of Andreas Hinkel is large and presented
as polaroids. When hovered over, the menu item rises.
Utah.travel
The items in Utah.travel’s vertical navigation menu pop out to the
right when hovered over. Sub-menu items reveal a brochure map
in the background.




Bert Timmermans
Bert Timmbermans’ portfolio website is laid out like a notebook,
with the primary navigation menu designed like ribbon
bookmarks. The menu has only icons; when you mouse over an
item, it animates to reveal the text.
RUDEWORKS
The beauty of RUDEWORKS’ navigation menu is its simplicity.
Noticing it at first glance may be difficult because of the menu’s
low contrast with the background. When a menu item is hovered
over, it fades to dark red.




Dragon Interactive
Dragon Interactive’s primary menu items smoothly transition to a
colorful state when hovered over.
Unusual Shapes
Because most websites have straight edges and sharp corners, irregular shapes give you
a chance to break from the norm. One current trend is to give menus an amorphous
shape to make them really stick out.

Booma
Booma has roughly sketched items in a random alignment for its
main navigation, making it different from what you see on most
other websites.




Inner Metro Green
This menu bar has an irregular shape, contributing to the disorganized
grunge theme of the website.
HTO
HTO’s navigation bar is a strip of aged paper angled down and
clipped to the background photograph.




smriyaz.com
smiriyaz.com shuffles its primary menu items, and the text is
written vertically.
Think Up
Think Up’s menu items are crumpled post-it notes, and the
navigation follows the tabbed navigation user interface design
pattern. Hovering over an item changes the color, and clicking on
it brings it forward on the z-plane.




f claire baxter
The menu items on this website stick out like bookmarks. The
vertically written text and the varied color and size all help the
website stand out.
Custom Tshirts UK
The navigation items on this website are flare buttons pinned to
the corner of a t-shirt background.
Experimental Solutions
Although it’s usually not the best idea to come up with some strange and/or unique
site navigation, designers tend to risk crazy and uncommon experiments. When trying
out something new, make sure that you don’t put the usability of your site in danger by
creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t
make sense out of it.


                                          Steven Holl is an architect.
                                          Which is why his navigation menu
                                          looks like an architectural sketch.
                                          Each navigation option is given some
                                          weight in the map — apparently
                                          according to its weight on the site.
Playground Blues tries out something
completely different; each of 12 site
sections has its color in the left sidebar.
Once the visitor hovers the mouse
arrow over the left-hand sidebar the
icons pop up providing visitors with
navigation options. Title-attribute is
used as well. And to make sure visitors
actually can find the navigation the
icons pop out like harmonica first time
the page is loaded.




                                              Flash-based 3D-effect used on
                                              Gol.com.pl. The menu can also
                                              be expanded.




 Cobahair.co.uk uses only BIG
 typography…
Highly Usable Navigation
Apple
Apple has one of the more exceptional websites, particularly
because of the navigation layout. The Mac menu is quite
amazing. With images, it couldn’t be easier to find items and
move through the menu.




CREASENSO
The content on the home page of this portfolio website has an
extremely simple yet usable organization.
Alex Buga
Visitors here use a large and well-laid out slider to move through news
items.




Thibaud’s Portfolio
Another stunning portfolio with creative navigation, this one with
Flash-based “color samples” to choose from. Like items are
grouped together.
Handwriting in Use
Recently we already discussed the hand-drawing style in modern web-design. And what
holds for design layouts also holds for its speci c elements — for instance, for navigation.
Vertical Tabs
Although traditional desktop-applications almost never make use of vertical tabs, in the
office vertical tabs are used at least as often as horizontal ones. In fact, designers often try
it out; and the results can be quite interesting.
Before using vertical tabs you should make sure that it is possible within your layout and
you actually have enough area to cover all navigation options on every single page. And,
of course, the text is harder to read.
Reference:
http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htm
compile from some resource at smashingmagazine

Mais conteúdo relacionado

Mais procurados

Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpageAishwarya Pallai
 
Photoshop layers
Photoshop layersPhotoshop layers
Photoshop layersMarche Ygar
 
Lecture 1 intro to web designing
Lecture 1  intro to web designingLecture 1  intro to web designing
Lecture 1 intro to web designingpalhaftab
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
Website Introduction
Website IntroductionWebsite Introduction
Website Introductiontmm13
 
PPT on Photoshop
PPT on PhotoshopPPT on Photoshop
PPT on PhotoshopPaddy Lock
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSSAnna Cook (she/her)
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web DevelopmentRobert J. Stein
 
Principles of animation
Principles of animationPrinciples of animation
Principles of animationsuniltalekar1
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentGlobal Media Insight
 
Lecture 5 macromedia flash
Lecture 5 macromedia flashLecture 5 macromedia flash
Lecture 5 macromedia flashpoleyseugenio
 
HTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsHTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsGrayzon Gonzales, LPT
 
Basic WordPress for Beginner ppt
Basic WordPress for Beginner pptBasic WordPress for Beginner ppt
Basic WordPress for Beginner pptDipika Wadhvani
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designingsreejagiri
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing PresentationRahulSuri30
 
Unit 1 introduction to web programming
Unit 1 introduction to web programmingUnit 1 introduction to web programming
Unit 1 introduction to web programmingzahid7578
 

Mais procurados (20)

Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpage
 
Photoshop layers
Photoshop layersPhotoshop layers
Photoshop layers
 
Lecture 1 intro to web designing
Lecture 1  intro to web designingLecture 1  intro to web designing
Lecture 1 intro to web designing
 
Web design principles
Web design principlesWeb design principles
Web design principles
 
Canva Turorial
Canva TurorialCanva Turorial
Canva Turorial
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Website Introduction
Website IntroductionWebsite Introduction
Website Introduction
 
PPT on Photoshop
PPT on PhotoshopPPT on Photoshop
PPT on Photoshop
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
Principles of animation
Principles of animationPrinciples of animation
Principles of animation
 
User interface design
User interface designUser interface design
User interface design
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
 
Lecture 5 macromedia flash
Lecture 5 macromedia flashLecture 5 macromedia flash
Lecture 5 macromedia flash
 
HTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsHTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgrounds
 
Basic WordPress for Beginner ppt
Basic WordPress for Beginner pptBasic WordPress for Beginner ppt
Basic WordPress for Beginner ppt
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designing
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
 
Video editing
Video editingVideo editing
Video editing
 
Unit 1 introduction to web programming
Unit 1 introduction to web programmingUnit 1 introduction to web programming
Unit 1 introduction to web programming
 

Semelhante a Effective web navigation

Web Design Trends in Australia - PPT
Web Design Trends in Australia - PPTWeb Design Trends in Australia - PPT
Web Design Trends in Australia - PPTSxope Consolidate
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tipsffats1
 
BEST 6 ELEMENTS OF WEBSITE DESIGN
BEST 6 ELEMENTS OF WEBSITE DESIGNBEST 6 ELEMENTS OF WEBSITE DESIGN
BEST 6 ELEMENTS OF WEBSITE DESIGNsneharathod39
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User InterfaceBeth Case
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elementsrobin fay
 
Top 10 prospects of good navigation design
Top 10 prospects of good navigation designTop 10 prospects of good navigation design
Top 10 prospects of good navigation designStanleyMaddox
 
Webdesign New
Webdesign NewWebdesign New
Webdesign Newlyngdoh
 
Web 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperWeb 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperNyros Technologies
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsLany Lyn Magdaraog
 
Website research
Website researchWebsite research
Website researcher180044
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017Lewis Lin 🦊
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site DesignOvidiu Von M
 
Davidson_Alison_IS30050_IA_Report
Davidson_Alison_IS30050_IA_ReportDavidson_Alison_IS30050_IA_Report
Davidson_Alison_IS30050_IA_ReportAlison Davidson
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 

Semelhante a Effective web navigation (20)

Web Design Trends in Australia - PPT
Web Design Trends in Australia - PPTWeb Design Trends in Australia - PPT
Web Design Trends in Australia - PPT
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tips
 
BEST 6 ELEMENTS OF WEBSITE DESIGN
BEST 6 ELEMENTS OF WEBSITE DESIGNBEST 6 ELEMENTS OF WEBSITE DESIGN
BEST 6 ELEMENTS OF WEBSITE DESIGN
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
Atlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Tech Talk - Web 2.0 Design GuidelinesAtlogys Tech Talk - Web 2.0 Design Guidelines
Atlogys Tech Talk - Web 2.0 Design Guidelines
 
Top 10 prospects of good navigation design
Top 10 prospects of good navigation designTop 10 prospects of good navigation design
Top 10 prospects of good navigation design
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
 
Web 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros DeveloperWeb 2.0 Design Standards By Nyros Developer
Web 2.0 Design Standards By Nyros Developer
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
Website research
Website researchWebsite research
Website research
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 
mortiz_Web_Style_Guide
mortiz_Web_Style_Guidemortiz_Web_Style_Guide
mortiz_Web_Style_Guide
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
P1 M1 media
P1 M1 mediaP1 M1 media
P1 M1 media
 
Lesson 4
Lesson 4Lesson 4
Lesson 4
 
Davidson_Alison_IS30050_IA_Report
Davidson_Alison_IS30050_IA_ReportDavidson_Alison_IS30050_IA_Report
Davidson_Alison_IS30050_IA_Report
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 

Mais de ananda gunadharma

10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web designananda gunadharma
 
Effective visual communication for GUI
Effective visual communication for GUIEffective visual communication for GUI
Effective visual communication for GUIananda gunadharma
 
Penyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklatPenyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklatananda gunadharma
 
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...ananda gunadharma
 

Mais de ananda gunadharma (9)

Grid system introduction
Grid system introductionGrid system introduction
Grid system introduction
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web design
 
Wireframe
WireframeWireframe
Wireframe
 
Print design vs web design
Print design vs web designPrint design vs web design
Print design vs web design
 
Effective visual communication for GUI
Effective visual communication for GUIEffective visual communication for GUI
Effective visual communication for GUI
 
Web 2.0 style guide
Web 2.0 style guideWeb 2.0 style guide
Web 2.0 style guide
 
Rich Media Banner Ads
Rich Media Banner AdsRich Media Banner Ads
Rich Media Banner Ads
 
Penyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklatPenyusunan instrumen dan butir soal evaluasi diklat
Penyusunan instrumen dan butir soal evaluasi diklat
 
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
Pengembangan modul elektronik sebagai sumber belajar untuk mata kuliah multim...
 

Último

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 

Último (20)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 

Effective web navigation

  • 1. Effective Web Navigation Design Multimedia Design
  • 2. Instructional Goals • Understand basic principles of good navigation design in web sites • Apply basic principles of good navigation design in designing websites to achieve usability and accessibility • Understand some navigation design trends in current websites
  • 3. “Navigation menu is the most signi cant and the most important element in web design”
  • 4. If people cannot navigate through your site, they will quickly leave. Designing effective navigation on website is crucial. But there are some basic things you need to do before you can start worrying about rollovers or links, images or ash.
  • 5. 1. Information Architecture Before you start to plan your navigation, you need to de ne your site’s information architecture. Information architecture is the taxonomy or structure of your Web site. Some common taxonomy elements on a corporate or business Web page are: • Products - the products or services the company sells • About - information about the company • Investor Relations - information speci c to investors • Support - help for customers
  • 6. 2. Organization Once you've determined your site architecture, you need to decide how to organize it. You might have it all live in one directory, and just link to the major pages from your front page. Or you might have all the sub-pages separated into directories. You should think about how your customers might wander through it. Flow charts and storyboards can help you map out exactly how you would like to encourage your readers to use the site.
  • 7. 3. Navigation Design Once you have an idea of the architecture and organization, you're ready to think about the design of the navigation. There are several things you should consider in deciding on your navigation design: Accessible The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method. Meaningful Keep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.
  • 8. Understandable If you want to use images for your navigation, make sure that there is some text associated with them. " Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think. Prevalent Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.
  • 9. More recent trends in navigation design. 3-D Navigation Lately, we’ve seen a trend towards design elements that sit on a higher z-plane; that is, they appear closer than other elements on the page. This trend is commonly applied, no surprise, to navigation menus. Delibar The content area on the Delibar website looks like a pile of two pieces of paper, with the navigation items holding them together. It also features a subtle JavaScript effect that smoothly moves them up when you hover over them.
  • 10. Blue Door Baby The Blue Door Baby navigation bar is styled like a ribbon that is laid over top of the feature area. The menu items are text-image replacements that have a subtle inset-text effect. Sower of Seeds The navigation bar on Sower of Seeds looks like it wraps around the content area, making it stand out for the user.
  • 11. Mystery Tin The Mystery Tin navigation menu is arranged vertically. The active menu item has a background that wraps around the side of the content area. Similarly, hovering over a menu item shows a smaller 3-D ribbon.
  • 12. Speech Baloons Designing menu items in the shape of speech balloons, or speech bubbles, appears to be another popular trend. It’s a great way to break out of the conventional rectangular menu. Alexarts Alexarts features a background of a city waterfront. Navigation menu items are in large speech bubbles that point to different elements of the scene. Hovering over a navigation bubble propels it slightly upward, a subtle indication that it is interactive and is the current target.
  • 13. Bush Theatre Bush Theatre uses thought bubbles instead of speech balloons, which in comic books denote the subject’s thoughts. Rob Alan Irregularly shaped speech balloons make for a distinguished look on Rob Alan’s website. The speech bubble opens a groove in the main content area, which visually connects them.
  • 14. Kingpin Social Kingpin Social’s primary navigation menu is hard to miss, with its big size, rounded corners and copious padding. The active menu item is highlighted with a speech balloon. GIANT Creative Bright colors against a dark background and a generous size makes GIANT Creative’s navigation stand out from the rest of the text. Hovering over a menu item reveals the speech bubble’s pointer.
  • 15. Rounded Corners Rounded corners are often used to soften sharp rectangles. The trend has carried over from call to action buttons to menu items, whose appearance as buttons is meant to entice users to click on them. Ballpark Ballpark’s navigation menu in the top-right uses CSS background text replacement to add round-cornered buttons to the text. New Look Media New Look Media’s blue navigation buttons are striking because of the dark background.
  • 16. MetaLab Rounded corners with graphic icons to the left are featured in this popular website’s menu bar. gugafit gugafit’s navigation buttons change to green on hover. The active item is given a dark-blue pressed look.
  • 17. Vistrac Vistrac’s rounded buttons can only be seen in modern versions of Web browsers such as Firefox, Safari, Google Chrome and Opera because the developers have implemented the working draft specifications of the CSS 3 border-radius property. In other Web browsers (i.e. IE 8 and lower: the browser that’s hindering the progress of Web design), the menu items appear as normal rectangles. Viljami Salminen Web designer Viljami Salimen gives the active items in his navigation menu a rounded button look.
  • 18. Icons in Navigation Over a year ago, we noted that visually appealing icons are increasingly being used, and this trend has continued. Icons not only are eye candy but help create visual recognition for users. Having said that, one should keep in mind that it’s always important to keep the loading time as short as possible, thus making the page as responsive as possible. mesonprojekt Karl Francisco Fernandes’ portfolio has a hand-drawn-themed navigation menu. Icons make the menu items more visual, giving the website a distinguished look.
  • 19. Sourcebits Sourcebits uses small icons for its menu and sub-menu items. They add intricacy to the navigation. Duarte Pires This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.
  • 20. JavaScript Animation With JavaScript frameworks making it easier for Web designers to create animated page elements using just a few lines of code, designers have been using JavaScript lately for more aesthetic than functional purposes. Andreas Hinkel The primary navigation of Andreas Hinkel is large and presented as polaroids. When hovered over, the menu item rises.
  • 21. Utah.travel The items in Utah.travel’s vertical navigation menu pop out to the right when hovered over. Sub-menu items reveal a brochure map in the background. Bert Timmermans Bert Timmbermans’ portfolio website is laid out like a notebook, with the primary navigation menu designed like ribbon bookmarks. The menu has only icons; when you mouse over an item, it animates to reveal the text.
  • 22. RUDEWORKS The beauty of RUDEWORKS’ navigation menu is its simplicity. Noticing it at first glance may be difficult because of the menu’s low contrast with the background. When a menu item is hovered over, it fades to dark red. Dragon Interactive Dragon Interactive’s primary menu items smoothly transition to a colorful state when hovered over.
  • 23. Unusual Shapes Because most websites have straight edges and sharp corners, irregular shapes give you a chance to break from the norm. One current trend is to give menus an amorphous shape to make them really stick out. Booma Booma has roughly sketched items in a random alignment for its main navigation, making it different from what you see on most other websites. Inner Metro Green This menu bar has an irregular shape, contributing to the disorganized grunge theme of the website.
  • 24. HTO HTO’s navigation bar is a strip of aged paper angled down and clipped to the background photograph. smriyaz.com smiriyaz.com shuffles its primary menu items, and the text is written vertically.
  • 25. Think Up Think Up’s menu items are crumpled post-it notes, and the navigation follows the tabbed navigation user interface design pattern. Hovering over an item changes the color, and clicking on it brings it forward on the z-plane. f claire baxter The menu items on this website stick out like bookmarks. The vertically written text and the varied color and size all help the website stand out.
  • 26. Custom Tshirts UK The navigation items on this website are flare buttons pinned to the corner of a t-shirt background.
  • 27. Experimental Solutions Although it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it. Steven Holl is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.
  • 28. Playground Blues tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded. Flash-based 3D-effect used on Gol.com.pl. The menu can also be expanded. Cobahair.co.uk uses only BIG typography…
  • 29. Highly Usable Navigation Apple Apple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu. CREASENSO The content on the home page of this portfolio website has an extremely simple yet usable organization.
  • 30. Alex Buga Visitors here use a large and well-laid out slider to move through news items. Thibaud’s Portfolio Another stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.
  • 31. Handwriting in Use Recently we already discussed the hand-drawing style in modern web-design. And what holds for design layouts also holds for its speci c elements — for instance, for navigation.
  • 32. Vertical Tabs Although traditional desktop-applications almost never make use of vertical tabs, in the office vertical tabs are used at least as often as horizontal ones. In fact, designers often try it out; and the results can be quite interesting. Before using vertical tabs you should make sure that it is possible within your layout and you actually have enough area to cover all navigation options on every single page. And, of course, the text is harder to read.