background preloader

10 Tips to Create a More Usable Web

10 Tips to Create a More Usable Web
Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience. Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said: “Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.” In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project. 1. Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Eye tracking study reveals 12 website tactics Eye tracking studies have revealed valuable information about how people read and interact with websites. One study, Eyetrack III, published a summary of their eye tracking results for news sites. While this is just one eye tracking study focused on a particular type of site, I think there are instructive nuggets here for any informational website. In no particular order, here are 12 results I found particularly interesting. 1.Headlines draw eyes before pictures. But the participants in this study looked at headlines, especially in the upper left of the page, before they looked at photos when they landed on a page. 2. This means you should front-load your headlines with the most interesting and provocative words. 3. The implication is the same as before. 4. No nonsense. 5. Be careful with this one. 6. The point may be that anything at the top of a page will be seen immediately. 7. In online writing as in most ad writing, you have to forget normal paragraph development. 8. 9. 10. 11. 12.

- Best of Parallax-Effect - Webdesign und Webentwicklung im Webstandard-Blog Inspiration - 30 Apr, 2009 Das Parallax Scrolling ein interessanter Effekt ist, der es ermöglicht Bewegung in Eure Webseiten zu bringen, ist durchaus bekannt. Auch das für diesen Effekt lediglich einige Grafiken, ein wenig CSS, etwas (X)HTML und je nach Anforderung auch etwas JavaScript ( ist keine Voraussetzung, denn es geht auch ohne! ) notwendig sind, überrascht vor allem die fortgeschrittenen Anwender wenig. stephband.info ( move the cursor ) therissingtonpodcast.co.uk ( resize the Browser - Header & Footer ) www.silverbackapp.com ( resize the Browser - Header ) www.cdev.ru ( resize the Browser - Header ) inner.geek.nz ( scroll the content ) weallhatequickbooks.com ( resize the Browser - Footer ) dromaeo.com ( resize the Browser - Header ) arnaud-k.fr ( move the cursor - Header ) www.csslab.cl ( resize the Browser - Footer ) www.sebbi.de ( move the cursor - Header ) www.yolcudergisi.com ( move the cursor - Header ) marcofolio.net ( resize the Browser - my favorite!

Fluid 960 Grid System | 16-column Grid Article Heading Subheading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Heading 3 Heading 4 Heading 5 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Heading 6 Epsum factorial non deposit quid pro quo hic escorol.

Adobe Photoshop tutorials, from beginner to advanced | HV-DESIGNS.CO.UK How To Fix The Top 10 Organic SEO Issues That Stop You Getting Noticed On The Internet How To Fix The Top 10 Organic SEO Issues That Stop You Getting Noticed On The Internet. (Issues 1 And 2 Explained): August 5th, 2009 | by BillEgan | Stopping SEO Post 1 of 5 – The Global Link Popularity Of Your Website and Anchor Text of Inbound Link. Recently, The Sunday Times had an article headed…. “Firms are Investing in Search-Engine Optimisation to get Themselves Noticed on the Internet”. The story went on…… “The hotels website Superbreak had a problem three years ago. Search-engine optimisation (SEO) proved to be the answer According to data published by the U.S. based “Search Engine Marketing Professionals Organisation” (SEMPO), Search Engine Optimisation (or SEO) is set to increase it’s market share from 18% of total online marketing spend to 38% in the short to medium term. So What Are The Top 10 Issues That Stop Websites Attracting Traffic? Read on to find out what are the top 10 issues that stop your website attracting traffic and how to take practical steps to address these.

Usability 101: Fundamentals and Definition - What, Why, How (Jakob Nielsen's Alertbox) This is the article to give to your boss or anyone else who doesn't have much time, but needs to know the basic usability facts. What — Definition of Usability Usability is a quality attribute that assesses how easy user interfaces are to use. Usability is defined by 5 quality components: Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? There are many other important quality attributes. Usability and utility are equally important and together determine whether something is useful: It matters little that something is easy if it's not what you want. Definition of Utility = whether it provides the features you need.Definition of Usability = how easy & pleasant these features are to use.Definition of Useful = usability + utility. Why Usability Is Important On the Web, usability is a necessary condition for survival. The first law of ecommerce is that if users cannot find the product, they cannot buy it either. How to Improve Usability

Form Elements: 40+ CSS/JS Styling and Functionality Techniques Aug 17 2008 Designing effective web forms isn’t easy, as we need to figure out more practical styling and functionality techniques to provide a great user experience. Recently there have been a number of noteworthy techniques such as styling different form fields, live validation, Context highlighting, trading options from field to another, slider controls and more – using CSS and different Javascript libraries. You might be interested to check other CSS related posts: 1-Styling dropdown select boxes- To style a dropdown select box is heavy work. 2-<select> Something New, Part 1-With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation. 3-Styling even more form controls-There are a lot of controls that can be used in an HTML form. 6-Masked Input Plugin- A masked input plugin for the jQuery javascript library. 38-Select box manipulation Homepage

Top 10 Programming Fonts Sunday, 17 May 2009 • Permalink Update: This post was written back in 2009, and much has changed since then. I’ve also written a few subsequent posts about alternative programming fonts, like this one about Anonymous Pro. I’m a typeface geek, and when it comes to selecting a font I’ll stare at all day, I tend to be pretty picky. What follows is a round-up of the top 10 readily-available monospace fonts. A note about anti-aliasing In the past, we’ve had to decide between tiny monospace fonts or jagged edges. If you have any doubt that anti-aliased fonts are apropos for code, note that even the venerable BBEdit — which for years has shipped with un-aliased Monaco 9 set as the default — has made the jump. Unless otherwise noted, I’ve used a larger size font, 15-point in fact, for the examples here to illustrate their legibility at larger sizes and with anti-aliasing turned on. 10. Figure 1 Courier New 9. Figure 2 Andale Mono 8. Figure 3 Monaco Figure 4 Monaco 9-point, without anti-aliasing 7. 6.

Tutorials Realtime Chat with Node.js By Nick Anastasov | In this tutorial, we are going to build a realtime chat system with Node.js, Express and the socket.io library. Visitors will be able to create private rooms in which they can chat with a friend. Read more My New Favorite Technique ForHiding Overflowing Text By Martin Angelov | In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background – a perfect addition to your new design.

40 Stunning and Creative Web Sites | Inspiration | PelFusion.com For designers working on different tools is not only important, they have to get daily dose of inspiration too. So for your inspiration i have arranged really amazing and creative web sites. This list includes creative css, flash, design studio and portfolio sites. I hope you will like the sites as these are really inspirational. Here is the list of 40 stunning and creative web sites. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. Advertisement Tags: creativeInspirationsitesweb 2.0web site — Ferman Aziz Ferman Aziz is a designer, poet, writer and a good chess player.

Related: