SlideShare une entreprise Scribd logo
1  sur  25
Interface Design CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From  Web Style Guide, Chapter  4: Interface Design
Users of web documents don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design.
Wayfinding The elements of the built environment that allow us to navigate successfully through complex spaces like cities, towns, and the Web.
[object Object],[object Object],[object Object],[object Object],Wayfinding
[object Object],Wayfinding Print designers and editors often chafe at the heavy interface framing of web pages—do we really need such a burden of headers and footers and buttons and links? Well, yes, we do. Without that navigation interface, and all the “you are here” markers it provides, we’d all be back to that lost-in-space feeling that was so common in the early days of the web.
Paths & Breadcrumbs
In large sites users should be able to readily see when they have passed important regional boundaries. If all the pages look identical, it’s hard to tell where you are within a large site.
As pages get more complex, offering many choices, you risk overwhelming the user with the “Times Square effect” of too many competing visual stimuli.
Pathfinding Summary ,[object Object],[object Object],[object Object],[object Object]
Interface Design
User interface research shows that about half of web users prefer to browse through menu lists of links to find information, and the other half will go straight to the search box to enter keywords for search.  Supporting both navigation paradigms is important to user interface design.
Multiple and complementary “you are here” markers help users stay oriented in complex sites. These landmark and wayfinding elements are especially important to users who navigate by searching -  who may never even see your home page .
For sites larger than a few pages, provide search on every page. Be sure to define the scope of the search, ie. the site, the department, the entire organization, the entire Web?
 
AVOID PAGES
MINIMIZE STEPS  Users prefer a few pages of carefully organized choices over many layers of oversimplified menu pages
[object Object],[object Object],[object Object],[object Object]
Considerations ,[object Object],[object Object],[object Object]
 
“ Folder tabs” are ideal when your site has relatively few (five to seven) major navigation categories. Semantically, header navigation lists should always be marked up as html lists, even if what appears on the page looks more like a collection of folder tab graphics.
Information Design
Every webpage needs… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
also… ,[object Object],[object Object],[object Object],[object Object],[object Object]
Enterprise interface programs have three primary aims: coherence, symbolism, and positioning. The Enterprise Interface
 

Contenu connexe

Tendances

Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and ElementsEromRamos
 
Website Design Issues
Website Design IssuesWebsite Design Issues
Website Design Issuesrakudepp
 
Web Design Principle and Elements
Web Design Principle and ElementsWeb Design Principle and Elements
Web Design Principle and ElementsNicahTheaBajenting
 
Heuristic Evaluation of Grand Canyon Tour and Travel
Heuristic Evaluation of Grand Canyon Tour and TravelHeuristic Evaluation of Grand Canyon Tour and Travel
Heuristic Evaluation of Grand Canyon Tour and Travelcathymcclure
 
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
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web DesignDan Dixon
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design PrinciplesMukesh Tekwani
 
Practical exam-gegremosa-st.john-pptx (2)
Practical exam-gegremosa-st.john-pptx (2)Practical exam-gegremosa-st.john-pptx (2)
Practical exam-gegremosa-st.john-pptx (2)AlphaLephew
 
Principles of web design
Principles of web designPrinciples of web design
Principles of web designdswebdesign
 
Web design-principles-and-elements-by-renalyn-paica
Web design-principles-and-elements-by-renalyn-paicaWeb design-principles-and-elements-by-renalyn-paica
Web design-principles-and-elements-by-renalyn-paicaAikaMalandaya
 
FYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & NavigationFYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & NavigationArti Parab Academics
 
What Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWhat Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWise Guys Technologies
 

Tendances (20)

Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
Good web design
Good web designGood web design
Good web design
 
Design sitemap
Design sitemapDesign sitemap
Design sitemap
 
Web development
Web developmentWeb development
Web development
 
Basic webdesign
Basic webdesignBasic webdesign
Basic webdesign
 
Website Design Issues
Website Design IssuesWebsite Design Issues
Website Design Issues
 
Web Design Principle and Elements
Web Design Principle and ElementsWeb Design Principle and Elements
Web Design Principle and Elements
 
Heuristic Evaluation of Grand Canyon Tour and Travel
Heuristic Evaluation of Grand Canyon Tour and TravelHeuristic Evaluation of Grand Canyon Tour and Travel
Heuristic Evaluation of Grand Canyon Tour and Travel
 
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
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
 
Creating google sites
Creating google sitesCreating google sites
Creating google sites
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Practical exam-gegremosa-st.john-pptx (2)
Practical exam-gegremosa-st.john-pptx (2)Practical exam-gegremosa-st.john-pptx (2)
Practical exam-gegremosa-st.john-pptx (2)
 
Principles of web design
Principles of web designPrinciples of web design
Principles of web design
 
Web design principles
Web design principlesWeb design principles
Web design principles
 
Web Site Design
Web Site DesignWeb Site Design
Web Site Design
 
Web design-principles-and-elements-by-renalyn-paica
Web design-principles-and-elements-by-renalyn-paicaWeb design-principles-and-elements-by-renalyn-paica
Web design-principles-and-elements-by-renalyn-paica
 
FYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & NavigationFYBSC IT Web Programming Unit II Html Page Layout & Navigation
FYBSC IT Web Programming Unit II Html Page Layout & Navigation
 
What Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer JacksonWhat Do When Plan A Site-Website Developer Jackson
What Do When Plan A Site-Website Developer Jackson
 
Htm lrubric
Htm lrubricHtm lrubric
Htm lrubric
 

Similaire à 4 Interface Design

Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site DesignOvidiu Von M
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page DesignOvidiu Von M
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User InterfaceBeth Case
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsiteZoaib Mirza
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTREgroversimrans
 
Bia Marketing Presentation Huber Web Design
Bia Marketing Presentation Huber Web DesignBia Marketing Presentation Huber Web Design
Bia Marketing Presentation Huber Web Designruthmilligan
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...D'arce Hess
 
web design
web designweb design
web designbutest
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tipsffats1
 
5. ergonomic of www interface
5. ergonomic of www interface5. ergonomic of www interface
5. ergonomic of www interfaceKh Ravy
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityMichael Nolan
 

Similaire à 4 Interface Design (20)

Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Web Design Phase
Web Design PhaseWeb Design Phase
Web Design Phase
 
Interface Design
Interface DesignInterface Design
Interface Design
 
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 
Bia Marketing Presentation Huber Web Design
Bia Marketing Presentation Huber Web DesignBia Marketing Presentation Huber Web Design
Bia Marketing Presentation Huber Web Design
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...
 
web design
web designweb design
web design
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tips
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
 
Lesson 4
Lesson 4Lesson 4
Lesson 4
 
5. ergonomic of www interface
5. ergonomic of www interface5. ergonomic of www interface
5. ergonomic of www interface
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill University
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 

Plus de Program in Interdisciplinary Computing (20)

Phpmysqlcoding
PhpmysqlcodingPhpmysqlcoding
Phpmysqlcoding
 
Database basics
Database basicsDatabase basics
Database basics
 
CGS2835 HTML5
CGS2835 HTML5CGS2835 HTML5
CGS2835 HTML5
 
Mysocial databasequeries
Mysocial databasequeriesMysocial databasequeries
Mysocial databasequeries
 
Mysocial databasequeries
Mysocial databasequeriesMysocial databasequeries
Mysocial databasequeries
 
CGS2835 HTML5
CGS2835 HTML5CGS2835 HTML5
CGS2835 HTML5
 
01 intro tousingjava
01 intro tousingjava01 intro tousingjava
01 intro tousingjava
 
Web architecture v3
Web architecture v3Web architecture v3
Web architecture v3
 
Xhtml
XhtmlXhtml
Xhtml
 
Webdev
WebdevWebdev
Webdev
 
Web architecture
Web architectureWeb architecture
Web architecture
 
Sdlc
SdlcSdlc
Sdlc
 
Mysocial
MysocialMysocial
Mysocial
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Html5
Html5Html5
Html5
 
Frameworks
FrameworksFrameworks
Frameworks
 
Drupal
DrupalDrupal
Drupal
 
Database
DatabaseDatabase
Database
 
Javascript2
Javascript2Javascript2
Javascript2
 

4 Interface Design

  • 1. Interface Design CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 4: Interface Design
  • 2. Users of web documents don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design.
  • 3. Wayfinding The elements of the built environment that allow us to navigate successfully through complex spaces like cities, towns, and the Web.
  • 4.
  • 5.
  • 7. In large sites users should be able to readily see when they have passed important regional boundaries. If all the pages look identical, it’s hard to tell where you are within a large site.
  • 8. As pages get more complex, offering many choices, you risk overwhelming the user with the “Times Square effect” of too many competing visual stimuli.
  • 9.
  • 11. User interface research shows that about half of web users prefer to browse through menu lists of links to find information, and the other half will go straight to the search box to enter keywords for search. Supporting both navigation paradigms is important to user interface design.
  • 12. Multiple and complementary “you are here” markers help users stay oriented in complex sites. These landmark and wayfinding elements are especially important to users who navigate by searching - who may never even see your home page .
  • 13. For sites larger than a few pages, provide search on every page. Be sure to define the scope of the search, ie. the site, the department, the entire organization, the entire Web?
  • 14.  
  • 16. MINIMIZE STEPS Users prefer a few pages of carefully organized choices over many layers of oversimplified menu pages
  • 17.
  • 18.
  • 19.  
  • 20. “ Folder tabs” are ideal when your site has relatively few (five to seven) major navigation categories. Semantically, header navigation lists should always be marked up as html lists, even if what appears on the page looks more like a collection of folder tab graphics.
  • 22.
  • 23.
  • 24. Enterprise interface programs have three primary aims: coherence, symbolism, and positioning. The Enterprise Interface
  • 25.  

Notes de l'éditeur

  1. !