Document Details

LuxuriantDysprosium8005

Uploaded by LuxuriantDysprosium8005

Higher Technological Institute "HTI"

Rasha Hreidi

Tags

web design web navigation user experience design principles

Summary

This document discusses the rules of web navigation, providing guidelines on how to design user-friendly website navigation. It also explains the importance of considering users when designing web pages.

Full Transcript

‫اﻟﻤﻼﺣﺔ اﻟﺠﺰء_‪2‬‬ ‫رﺷﺎ ﻫﺮﯾﺪي‬ ‫‪8M68-74U3‬‬ ‫ﻣﻼﺣﺔ‪:‬‬ ‫اﻟﺤﺼﻮل ﻋﻠﯽ اﻟﻤﺴﺘﺨﺪم‬ ‫ﻣﻦ اﻷﻟﻒ إﻟﯽ )أﯾﻦ أﻧﺖ‬ ‫أرﯾﺪﻫﻢ أن( ب‪.‬‬ ‫دور‬ ‫ﻟﻠﻤﺴﺘﺨﺪﻣﯿﻦ‪:‬‬ ‫ﻣﻼﺣﺔ‪..‬‬ ‫اﺑﺤﺚ ﻋﻦ اﻷﺷﯿﺎء اﻟﺘﻲ ﯾﺮﯾﺪوﻧﻬﺎ ‪I.‬‬ ‫‪.2‬اﺣﺼﻞ ﻋﻠﯽ ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﯽ ﻣﺎ ﻫﻮ ﻣﻮﺟﻮد‬ ‫ﻓﻲ اﻟﻤﻮﻗﻊ‬...

‫اﻟﻤﻼﺣﺔ اﻟﺠﺰء_‪2‬‬ ‫رﺷﺎ ﻫﺮﯾﺪي‬ ‫‪8M68-74U3‬‬ ‫ﻣﻼﺣﺔ‪:‬‬ ‫اﻟﺤﺼﻮل ﻋﻠﯽ اﻟﻤﺴﺘﺨﺪم‬ ‫ﻣﻦ اﻷﻟﻒ إﻟﯽ )أﯾﻦ أﻧﺖ‬ ‫أرﯾﺪﻫﻢ أن( ب‪.‬‬ ‫دور‬ ‫ﻟﻠﻤﺴﺘﺨﺪﻣﯿﻦ‪:‬‬ ‫ﻣﻼﺣﺔ‪..‬‬ ‫اﺑﺤﺚ ﻋﻦ اﻷﺷﯿﺎء اﻟﺘﻲ ﯾﺮﯾﺪوﻧﻬﺎ ‪I.‬‬ ‫‪.2‬اﺣﺼﻞ ﻋﻠﯽ ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﯽ ﻣﺎ ﻫﻮ ﻣﻮﺟﻮد‬ ‫ﻓﻲ اﻟﻤﻮﻗﻊ‬ ‫‪.3‬اﻧﻈﺮ أﯾﻦ ﻫﻢ‬ ‫‪.4‬اﻧﻈﺮ إﻟﯽ أﯾﻦ ﯾﻤﻜﻨﻬﻢ اﻟﺬﻫﺎب‬ ‫ﻷﺻﺤﺎب اﻟﻤﻮاﻗﻊ‪:‬‬ ‫‪.1‬دﻓﻊ اﻟﻨﺎس إﻟﯽ ﻧﻘﺎط اﻟﻌﻤﻞ‬ ‫‪.2‬ﺧﺪﻣﺎت اﻟﺒﯿﻊ اﻟﻤﺘﻘﺎﻃﻊ أو ﺗﺴﻠﯿﻂ‬ ‫اﻟﻀﻮء ﻋﻠﯽ ﻣﻌﻠﻮﻣﺎت إﺿﺎﻓﯿﺔ‬ ‫‪.3‬اﻋﺮض ﻣﺎ ﻫﻮ ﻣﺘﺎح‪/‬ﻏﯿﺮ ﻣﺘﺎح‬ ‫‪.4‬ﯾﻤﻜﻦ اﻟﻌﺜﻮر ﻋﻠﯿﻪ ﻋﻠﯽ ﺟﻮﺟﻞ‬ ‫اﺧﺘﯿﺎر ﻧﻤﻂ اﻟﻤﻼﺣﺔ ‬ ‫ﺳﺒﺐ وﺟﻮد اﻟﻤﻼﺣﺔ )دورﻫﺎ(‬ ‫ ﻣﻦ ﺳﯿﺴﺘﺨﺪﻣﻪ‬ ‫ أﯾﻦ ﯾﺮﯾﺪون اﻟﺬﻫﺎب‬ ‫ ﻣﺎ ﺗﺮﯾﺪ ﻣﻨﻬﻢ أن ﯾﻔﻌﻠﻮا‬ ‫ ﻛﯿﻒ ﺳﺘﺪﯾﺮە )ﻧﻈﺎم إدارة اﻟﻤﺤﺘﻮى وﻣﺎ إﻟﯽ ذﻟﻚ(‬ ‫ﻧﻤﻮذج اﻟﻤﺘﺼﻔﺢ اﻟﻬﯿﻜﻠﻲ‬ ‫ ﻧﻤﻮذج ﺷﺠﺮة اﻟﻌﺎﺋﻠﺔ‬ ‫ﯾﻨﺸﺊ ﺗﺴﻠﺴﻼﹰ ﻫﺮﻣﯿﹱﺎ ﻋﺰﯾﺰﹰا ﻟﻠﻤﺤﺘﻮى‬ ‫ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﺮواﺑﻂ ﺗﻘﺪم اﻟﻤﺴﺘﺨﺪم إﻟﯽ ﺻﻔﺤﺎت أﺧﺮى‬ HORIZONTAL NAVIGATION HORIZONTAL NAVIGATION Conserves the most amount of Location most familiar for users, screen space we read left to right Makes for using drop downs for Does have a limit in terms of secondary navigation length of navigation item HORIZONTAL NAVIGATION VERTICAL NAVIGATION VERTICAL NAVIGATION Good for sites with a lot of main navigation items Supports multiple types of secondary navigation Can act as a page design element Normally takes up more space then horizontal navigation VERTICAL NAVIGATION SECONDARY NAVIGATION SECONDARY NAVIGATION Common location for displaying Don’t rely on more then 2 levels B-level pages of pop-out/drop down menus Moves out of the way when not Design enough contrast with the active to conserver screen space information below so the user can clearly read the text UTILITY NAVIGATION UTILITY NAVIGATION Assistant pages Shopping Cart/User login info Pages that don’t fit into a single Pages that you want displayed on logical category every page Location/Language selectors FOOTER LINKS FOOTER LINKS Provides a place for important information away from other content Acts as a visual “End” to your page Allows users to access pages without scrolling back to the top Can be styled as multiple columns BREADCRUMB TRAILS BREADCRUMB TRAILS Convenient for users Don’t use when you don’t need to Reduces clicks to return to higher- Don’t use as primary navigation level pages Don’t use when pages have multiple Doesn’t usually hog screen space categories SEARCH BOXES SEARCH BOXES Not every website needs a search box The box must be clearly visible, quickly recognizable and easy to use A search box should be abox. A search box should be simple Don’t make the input field too short Don’t making the submit button too small PAGINATION NAVIGATION PAGINATION NAVIGATION Provide large clickable areas Identify the current page Space out page links Provide Previous and Next links Use First and Last links Put First and Last links on the outside Give the user a sense of volume The Golden Rules of Web Navigation. 1. Don’t make the user think The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. The Golden 1. DON’T MAKE THE USER Rules of Web THINK Navigation. 2.Don’t test user patience 3.Focus their attention The Golden 1. DON’T MAKE THE USER Rules of Web THINK Navigation. 2. Don’t test user patience 3. Focus their attention 4. Organize your content 1. DON’T MAKE THE USER The Golden THINK Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions The Golden 1. DON’T MAKE THE USER Rules of Web THINK Navigation. 2. Don’t test user patience 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for Simplicity 1. DON’T MAKE THE USER The Golden THINK Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for Simplicity 7.Embrace whitespace 1. DON’T MAKE THE USER The Golden THINK Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for simplicity 7.Embrace whitespace 8. Don’t assume WEB NAVIGATION CONVENTIONS  Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else.  Navigation conventions for the Web have emerged quickly, mostly adapted from existing print conventions.  Thinkof how frustrating if a convention is broken (e.g. when magazines don't put page numbers on advertising pages).

Use Quizgecko on...
Browser
Browser