10 Useful Usability Findings and Guidelines - Smashing UX Design Advertisement Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites. 1. A study by UX Matters found that the ideal position for labels in forms is above the fields. Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation. Positioning labels on the left also poses another problem: do you left-align or right-align the labels? 2. People instinctively notice other people right away when they come into view. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study. And now the baby is looking at the content.
How Gamification Can Make News Sites More Engaging Gamification, the use of gameplay mechanics for non-game applications, is transforming online news into an engaging, social and fun activity. It’s quickly becoming the next frontier in web and mobile technology. But what makes gamification successful? Simply put: motivation. By tracking readers' success, news organizations provide a sense of progress. At Mashable, we’ve incorporated gamification into Mashable Follow, our social layer and content curation tool. Activity is the core of Follow. Rewarding readers for taking these actions was an important component of Follow. Of course Follow badges are just one example of game mechanics on a news site — and here's why they work. Fostering Community As a result of the hunger for badges, readers develop a more personal and valuable community on our site. Andrew David Baron, an avid Follow user, can attest to the badges encouraging Mashable readers to comment more. Bob Aycock, another frequent Follow user agrees. Resonating With Readers Conclusion
50 Questions to Evaluate the Quality of Your Website How do you evaluate a website? By asking the right questions. No website is perfect. Every website has flaws. Many things that can go wrong, whether due to technical SEO, on-page optimizations, page speed, or something else. Ready to find your website’s flaws so you can get them fixed and working properly? Great! Read on to learn 50 questions you should ask to evaluate the quality of your website. 1. There shouldn’t be multiple H1 tags on the page. The H1 tag is the focus of the page’s topic, and thus it should only occur on the page once. If you include more than one H1 tag on the page, it will cause the dilution of the focus of the page. 2. One major issue that can impact a website negatively are 4xx and 5xx error pages. If your site cannot be crawled due to these issues, you can experience decreases in performance when search engines cannot effectively crawl the site. 3. Issues can occur when error pages are not properly configured. This can introduce conflicts in crawling and indexing. 4. 5. 6.
25-point Website Usability Checklist I've been thinking a lot lately about my process. Experience is a powerful thing, but it's rare that we really sit down and try to map out what we know. A while back, as part of my 5-point Website Clinic, I developed a 25-point website usability checklist - a way to create some method out of my madness and make sure that I don't forget anything critical when I'm working with a new client. Even though it's part of one of my paid offerings, I've decided to share this checklist. Basic Overview The list is split into 4 roughly equal sections, (I) Accessibility, (II) Identity, (III) Navigation, and (IV) Content. Section I. This section contains not only traditional accessibility issues, but anything that might keep a visitor from being able to access the information on a website. 1. 2. 3. 4. 5. 6. Section II. A key question when someone first comes to your site is "Who are you?" 7. 8. 9. 10. 11. Section III. 12. 13. 14. 15. 16. 17. Section IV. You've heard it before - Content is king. 18.
Node.js Performance Tips from LinkedIn LinkedIn’s Shravya Garlapati has shared a number of tips for improving performance on their mobile site while using Node.js. LinkedIn is working with a standard HTML5 mobile site as well as apps for iOS and Android. Previously, LinkedIn has talked about its continuous integration testing for mobile, now they’re sharing some of what they’ve learned. A couple of the tips are fairly obvious. For example, make sure that you use gzip to compress requests and responses. Another tip that (one hopes) is obvious? But LinkedIn also has a few insights that might not be obvious. Garlapati also recommends using binary modules with Node.js, and standard V8 JavaScript rather than client-side libraries.
Key Tips for Better Website Usability Ron Jones | October 3, 2011 | 1 Comment inShare30 How you can fortify your website and fix usability issues. So you have a great website that is loaded with great content but is it not converting and most of your visitors leave your site within the first 60 seconds. Website usability is a common concept among web designers. It is generally known that people visit your website with a specific task in mind. Use Keyword Phrases That Your Audience Is Searching On One of the first things site visitors look for are some visual clues that help them feel they have landed on a site that will help them solve their problem. Armed with your researched and targeted keywords, you should make sure they are prominently placed on the landing page. Consistent and Intuitive Site Navigation People are impatient and hate learning new things. I remember a few years ago renting a car and as I pulled up to the gate to check out, I couldn't find the button to roll down the window. Menus. Optimized Content Strategy
Top Web Developer Tools of 2011 While browser-based operating systems haven’t taken over the world, 2011 has been a pretty good year for Web developers. It’s an exciting time to be working in Web development, and there’s never been a better crop of tools to work with. Web standards are eclipsing proprietary toolkits, and the development community is creating its own set of open source tools to work with. Here’s a look at some of the best we’ve seen in 2011. To be clear, this isn’t exclusively a list of tools that debuted in 2011. Instead, I wanted to look at some of the most popular and best tools for Web developers through 2011. Basically, we’re looking to highlight tools that are innovative, widely used and/or wildly useful for Web developers. jQuery and jQuery Mobile No list of Web developer tools would be complete without jQuery, the ever-popular JavaScript library that we’ve covered extensively on ReadWriteHack. That’s not to say that jQuery is free of critics. Modernize IE with CSS3 PIE Bootstrap PhoneGap The Future?
Organized Approach to Emotional Response Testing Most user experience designers will have heard of the Product Reaction Cards (doc), a set of 118 words and phrases developed for Microsoft by Joey Benedek and Trish Miner in 2002 that can be deployed in a user testing workshop to help people articulate their emotional responses to a product. The Product Reaction Cards are part of the Desirability Toolkit (doc) that suggests facilitators ask users to choose the cards that "best describe the product or how using the product made them feel" and then ask them to narrow their selection to just five cards. The cards selection process is then followed by an interview where the participant explains why they selected those five cards. Whilst the 118 card deck seems to work for the creators of the PRC, some people think it's too much—I posted a question on UX Exchange a few months ago about and received responses like "unnecessarily fiddly" whilst another said they use a subset of the cards. Strong: DesolateAnguishedDespondentDepressed Mild: Weak:
9 Excellent Tools for Design Mockups So you've just taken some killer photos with your new DSLR, or you captured a great video with your iPhone — what's next? While it feels natural to just post media quickly to your Facebook Page, sometimes great photos or video need their own home in the form of a personal website. But on the other hand, it's not easy to make a website layout that complements rich media. In order to make a great website, professional web designers take advantage of mockup tools to analyze layout, design and functionality. Taking advantage of these applications (some of which are 100% free) is a wise move — especially if you're interested in creating a professional website for your photography or video. We've rounded up nine applications that can help you get the most out of designing your web layout. 1. The application comes with a huge collection of drop-in components and reusable libraries, and an easy drag-and-drop interface. 2. 3. 4. 5. 6. 7. 8. 9. inPresso Screens
Usability News 81 - Shaikh2 By A. D. Shaikh & K. Lenz Summary. In 2001, Bernard determined that users were able to form a schema for the location of web objects on informational websites. In 2001, Bernard conducted a survey to determine the expected location for a variety of web objects. Today, a larger, more diverse group of users access the internet on a regular basis. Participants Undergraduate psychology students (N=142; 50 males and 92 females) received course credit for completing a survey regarding the expected location of navigational elements commonly found on informational websites. Procedure A methodology similar to that used by Bernard (2001) was used. All stickers were presented in the same size, one square, to avoid any restrictions on placement. Frequencies were calculated for each web object for the 25 grid squares (Figure 1). The figures reveal that most participants had an expected location for each of the presented web objects. Figure 1. Figure 2. Figure 3. Figure 4. Figure 5. Figure 6. Home Link.