How to Design Effective Websites
Download as PPTX, PDF0 likes210 views
The document provides guidance on designing effective websites. It discusses maximizing usability by making pages self-evident and not requiring users to think too much. Additional tips include following existing conventions to leverage standard patterns, creating a clear visual hierarchy to emphasize important information, and supporting scanning of content through formatting with headings, bullets and short paragraphs. Usability testing throughout the design process is also recommended to identify and address issues.
![Use Persistent Navigation
“Navigation isn’t just a feature of the site, it is the site.”
It tells us how to use the site.
Persistent Navigation – Set of navigation elements that appear on every page
Site ID – Logo in top left corner of the page
Sections [Primary/Secondary]
Utilities – Things that help me use the site, or publisher information (Only 4-5)
Home Button
Search Box / Link to a Search Page](https://image.slidesharecdn.com/book3presentation-150508072800-lva1-app6891/85/How-to-Design-Effective-Websites-19-320.jpg)
How to Design Effective Websites
- 1. How to Design Effective Websites Jason Slowey, CSE 619, Spring 2015
- 2. Maximize Usability Goal should be to make each page Self-Evident Average user should know what “it” is and how to use “it” If you can’t make something self-evident, make it Self- Explanatory “Don’t Make Me Think!” People don’t like to puzzle over how to do things.
- 3. My Perspective I think that Krug’s quote “Don’t Make Me Think!” is a perfect way of describing how web pages should be designed, I had not though about how mindlessly we browse pages, and looking back on it, I see how the times when I have been thoroughly frustrated, have been when I had to really work to figure out how to use a site.
- 4. Follow Existing Conventions Conventions – The widely used or standardized design patterns In the last 20 years, many web conventions have changed Where things are located How they Work How they look Web conventions make life easier, when applied properly “Be innovative when you know you have a better idea, but take advantage of conventions when you don’t.”
- 5. My Perspective To be honest, before reading this, conventions was something I had completely taken for granted. Having now read this book, I see how keeping elements such as where utilities are located on the page, can strengthen the design.
- 6. Create Clear Visual Hierarchy Appearance of things on the page accurately portrays the relationships between the things on the page The more important something is, the more prominent it is Things that are related logically are related visually Things are nested visually to show their relationship to other things. Good visual hierarchy saves us work by preprocessing the page for us If everything looks equally important, we can’t effectively scan, which means a lot more work.
- 7. My Perspective Considering most of the time we are reading content online we are actually scanning it, I can see how creating visual hierarchy with the content on the page can enhance this process, and in turn enhance the user experience.
- 8. Design of Everyday Things This is very similar to the examples given in Design of Everyday Things regarding the doors. When the visual cues failed with the door design, it caused the user to think, and in some cases prevented the door from being used. In Krug’s book, when discussing visual hierarchies, he notes that when the visual cues fail it causes the user to think.
- 9. Pages = Clearly Defined Areas Users decide very quickly decide: What parts of the page will have useful information, then Rarely look at the other parts SO… Break pages up into clearly defined areas This allows users to decide what is important on the page, and what they can safely ignore
- 10. Make Clickabiltiy Obvious VERY Important to make it easy to tell what's clickable. Large part of what we do on the web is looking for the next thing to CLICK. We scan pages looking for visual cues that identify what is clickable It’s best to stick to one color for all text links, or Make sure that their shape and location identify them as links
- 11. My Perspective This is another example of a concept that, until reading this book, I had not given a ton of though to. Krug brings up an excellent point that when we are browsing, we are looking for the next thing to click. With this in mind, I can see why making clickability obvious is so vital.
- 12. Reduce Noise “Noise is one of the greatest enemies of easy-to-grasp pages” Three Types of Noise: Shouting – Everything screaming for your attention Disorganization Clutter Get rid of everything that’s not important
- 13. My Perspective I completely agree with Krug about getting rid of all noise on a web page. Nothing is more frustrating than trying to read content online while a brightly colored, fast moving ad is flashing repeatedly off to the side.
- 14. Support Scanning with Format The way your text is formatted can do a lot to make it easier to scan. Use Plenty of Headings Headings within text create an outline of the page Using bullets can have the same effect Keep Paragraphs Short Long paragraphs are daunting, hard to scan Highlight Key Terms, making them easier to find
- 15. My Perspective The idea of supporting scanning with format is in the same category with creating visual hierarchy. Since we know many users will be scanning the content, by catering to this we can enhance the experience.
- 16. Give Clear Choices “Links that clearly, and unambiguously the identify target assures users that clicking them will bring them closer to their goal” Make the choices: Brief – Smallest amount of info possible Timely – Placed so it is encountered right when it is needed Unavoidable – Formatted so it will for sure be noticed
- 17. Omit Needless Words Getting rid of needless words: Reduces noise Promotes useful content Shortens the page, enhancing scanning Remove “Happy Talk” Self-congratulatory, promotional writing you find in bad brochures Remove Instructions, Make EVERYTHING Self-Explanatory No one is going to read them
- 18. My Perspective The idea of supporting omitting needless words is in the same category as reducing noise. By taking Krug’s advice and “getting rid of everything that is not important, we enhance the user experience and can maximize learning.
- 19. Use Persistent Navigation “Navigation isn’t just a feature of the site, it is the site.” It tells us how to use the site. Persistent Navigation – Set of navigation elements that appear on every page Site ID – Logo in top left corner of the page Sections [Primary/Secondary] Utilities – Things that help me use the site, or publisher information (Only 4-5) Home Button Search Box / Link to a Search Page
- 20. My Perspective I love Krug’s line “Navigation isn’t just a feature of the site, it is the site” because it really reinforces the importance of navigation. By using persistent navigation, we not only keep the site consistent, but also allow users access to the vital navigation elements at all times.
- 21. Street Signs & Bread Crumbs Street Signs = Page Names Every page needs a name Page name should be at the top It needs to be prominent It needs to match the link the user clicked Bread Crumbs = Show Path from Home Page to Current Location while browsing Put them at the top of the page Use “>” to separate levels Boldface the current location
- 22. Establish the Main Point Getting off on the right foot is HUGE! “If they start lost, they will stay lost” Homepage should convey who you are, what you do, and what your site has to offer A Clear Homepage = Easily answer these questions: What Is It? What can I do here? What do they have here? Why should I be here
- 23. The Homepage Three places on the home page that provide explicit statements of what the site is about: The Tagline – “Pithy phrase that characterizes the whole enterprise” Good taglines are clear and informative Convey differentiation and a clear benefit Good taglines sound generic Be personable, lively and sometimes clever *Some websites can go without taglines, but it’s rare The Welcome Blurb – Top left Corner, Block of text The “Learn More” – Short explanatory video
- 24. Perform Usability Testing “If you want a great site, you’ve got to test it.” Test early in the project Much harder to make changes when the site is already in use. Perform DIY usability testing as an alternative to professional One Morning a Month Throughout the entire process Recruit loosely, 3 people Facilitator with Participant Observe Remotely Debrief, Decide what to fix
- 25. Don’t Forget Mobile Create a Mobile Site that is a subset of the full site Allow Zooming Always provide a link to the “full site” Make links take you where you want to go, not the homepage Don’t hide affordances No hoverability Be Memorable/Learnable Managing real estate challenges shouldn’t be done at the cost of usability “It’s all about tradeoffs.” Most serious usability problems are a result of a bad tradeoff Good Mobile Usability = Making Good Tradeoffs
- 26. Design of Everyday Things This is similar to the Design of Everyday Things in the sense that they also place a lot of value in affordances. According to Norman, affordances act as signifiers, just like they do in Krug’s book. In Krug’s book, when discussing mobile web navigation conventions, he notes the importance of making affordances prominent in order to help viewer pick up on visual cues.