Tag Archives: UX

How People with Disabilities Use the Web

W3CWeb Accessibility initiativeI was doing some research for a project and ran across this bit on the W3C website titled How People with Disabilities Use the Web. I love this section as it goes into something I’m really a fan of in user stories as they not only crisply get across a set of requirements, it personalizes a cold sterile set of requirements that seem fairly arbitrary to a warm and living set of requirements that make sense.

The other great thing about this set of user stories is that it challenges people to think about a different set of disabilities than they would normally thing about. For example, most people immediately think of screen readers when thinking about accessibility but forget about things like color blindness, epilepsy, hand tremors, cognitive disorders, short term memory, dyslexia and the like.

For example, as a confession here, I’m ADHD and mildly dyslexic. Captcha’s drive me up a WALL!!!! It takes me a long time to work through them especially if they have a series lower case of Os and Es. I have other friends who are much more dyslexic than I am and I have no idea how they sign up for anything on today’s web…

But the really hard one for me is when there’s a lot of text with no paragraph breaks or other things to break up the text. It’s really tough to get through and I have to work through it sometimes 10-15 times to get it. If it’s important, I’ll copy it into a text editor and break up the text and then read it.

Here’s the list of user stories that they have put together to date:

I really like this list and am hoping that it continues to grow and refine over time.

Voice Control with Amulet Devices

logoOne of the things that gets me excited is working with new forms of user interaction. Or rather old forms of user interaction that humans use being used with our users.

Amulet devices are doing just that. They are a BizSpark startup based in Dublin, Ireland. They are a device and software company. The software does voice control of Windows Media Center which can be the hub of your home entertainment.

Amulet_Detail_0246[1]Their remote is a universal remote that has a very clever microphone that is activated by a gyroscope. When you tip up the remote, it activates and allows you to control your media center by voice. It means that the remote won’t accidently pick up your voice and start changing channels on you right before the winning goal or the bad guy gets the bad guy. It also means that it’s you can use it in a crowded and noisy room as the mic is right next to you.

They are, unfortunately not available for sale in Europe but they are available all over North America.

When to use what Microsoft Client Technology

I was asked earlier when to use what Microsoft client Technology. I thought about just sending a link to Michael Schroeder’s post but decided I should put in my own thoughts on the matter first.

At the heart of Michael’s post is this table.

WPF WPF XBAP Silverlight ASP.Net + AJAX
Client Windows XP SP2 (With .Net 3.0), Vista and obviously Windows 7 Internet Explorer + Windows XP SP2 (with .Net 3.0) & Vista FireFox, Mac Safari, Internet Explorer Any Web Browser
Deployment Downloadable Installer or ClickOnce Runs in Internet Explorer secure sandbox One-time install of Silverlight plug-in Web Page
When to use Programs that need access to Windows desktop files. Intranet applications for Windows-oriented companies. Rich Internet Applications for public-facing web sites General-purpose public-facing web sites

Here’s my 2 cents on the subject.

WPF

WPF is a fantastic choice for applications that need full access to the desktop for any number of reasons. That could be full 3D support, access to desktop files and the like. You can install these applications through XCopy, a full downloadable Installer or a ClickOnce installer. Where possible, I like to leverage the ClickOnce installer as it gives some amazing benefits around auto-update and keeps my application in a secure sandbox so deployment becomes really easy.

WPF XBAP

Just don’t use XBAPs anymore. This was an attractive option for Intranet applications back before Silverlight 2 and to a lesser degree Silverlight 3. However, now that Silverlight has the power that it does with .NET and OOB options and the like, opt for Silverlight anytime you would have considered XBAPs.

Silverlight

Silverlight is the right choice for any external facing Applications. But that’s the key. I really look at Silverlight not as an HTML replacement but a true application layer. That’s one of the central points in the talk that James Ward and I did at Web 2.0 Expo last year – http://www.slideshare.net/joshholmes/best-and-worst-practices-building-ria-with-adobe-and-microsoft.

ASP.NET + AJAX

ASP.NET + AJAX is the right choice for external facing, or even internal facing, web sites where the primary focus is information dispersal. That said, there are some amazing applications built with JavaScript in the browser.

Overall

The reality is that there are a lot of grey lines. WPF is getting a lot easier to deploy breaking down the traditional decision points between desktop and web applications. Rich Web Applications blur those lines as well and the reality is that they could be used to build a lot of applications that have historically been either written as full desktop applications or as web applications. Then on the web application side, JavaScript and the browser are getting faster, strong and easier to develop all the time so it’s becoming more of a viable application building set of technologies.

Above the Fold and how It Really Should be Used

Chicago 080I’ve come to realize that many web designers don’t understand what “Above the Fold” and how it really should be used. Above the Fold is an old print newspaper layout term for what’s on the top part of the page, the part that is displayed in the window at the newspaper stand. In web design, the term is used for the bits that the user can see without having to scroll. I’ve talked and ranted about this before as It’s point number 23 in 32 ways to keep your blog from sucking

<update>It was brought to my attention that it’s often not a web designer but rather an Information Architect or a Developer who is updating the layout on the page. Completely agreed and this is yet another reason that you should look for competent web designers for the layout and design of your page.</update>

What’s bringing it up now is that CX Partners recently blogged about The myth of the page fold: evidence from user testing | cxpartners and it concerned me a little. CX Partners does a lot of user testing and one of the things that they have tested for is whether or not the “Fold” mattered to users and out of 800 users, only 3 were unable to find content because they would have to scroll to find it. They are right, users are used to scrolling and are willing to do so if they know that there’s more content below. We just need to give them visual hints that there is more content that they will have to scroll to see. What they are trying to fight is the urge to put all of the content or at least all of the *important* content Above the Fold and design pages so that users do have to scroll. I’m on board with that fight. Cramming all of the content into cramped margins and smashing things together just so that it can be seen without scrolling is horrible design.

Here’s the part that concerns me as an old school print layout guy. There’s a fundamental miss on what the “Above the Fold” content is supposed to be used for in your layout whether it’s print or web design.

How does print layout treat above the fold?

The above the fold content is not meant to be the meat of the content or really even the most important content. It’s meant to be eye catching. It’s the lure for people to pick up the paper or magazine.

100th Anniversary of the Seattle P-I NewspaperWhen thinking about the fold in a newspaper, think about the old school newspaper dispenser with the top half of the top page displayed in the little window. There is a deliberate attempt to put a catchy photo and headline in that window so people buy the paper. Is that the best thing in the paper, not even close. That’s the picture that’s going to look good on someone’s coffee table when they toss down the newspaper.

New York 1st day. magazine standsOr better, think about the magazine stand and how there are potentially hundreds of magazines there and you need for yours to stand out enough that people will buy it. Think this through – what can they see in the magazine stand? Typically they can see the top edge of the magazine and part of the picture. I was amazed once when I was talking to a freelance sports photographer who told me that he’d net $40k-$60k for one photo if he could land the cover picture on Sports Illustrated. But it makes a ton of sense. This concept of trying to stand out on just a headline and a photo is not lost on the smart people at Sports Illustrated. The right picture could make far more than $40k worth of a difference on the stand.

How does this apply to web design?

Honestly, it’s the same exact concept. The fold or scroll line is the area of the page that people can see without having to scroll down the page. This area needs to catch people’s attention correctly because they may only be on your page for a few seconds. If you look at the statistics on any site that gets a decent amount of traffic and the average page view length is measured in seconds, not minutes.

When people are browsing through and they get a link from another site or from a search engine, what’s the first thing that they see? Imagine that as if they are glancing past your page among the potentially hundreds of others that they are looking past which is really not that much of a stretch because they are looking to see which pages are more likely to fit their needs than others. They may not be paying for your content but they are investing their time.

The problems come in two sizes. First, there are designs that try to shove as much content as they can into that above the fold area because there’s an assumption that if it’s not there, their users won’t see it. Second, there are other designs that completely shun the idea of scrolling and end up with these horrid wizard style pages where the user has to click through to see the next page and the next page and so on. Either of these are poor choices.

Back to the article for a moment – I really liked CX Partners’s “Design tips to encourage scrolling”. What was missing is the “How to hook them and keep them” bit.

Let’s look at Jeff Blankenburg’s blog for a good reference here.

image

You know exactly what you are going to get on his page. The disk in the middle, which is what most people see first cycles through all of the social networks that he frequents. The tweets across the top express his last several publically blasted thoughts while the little bird that flies around them draws eyeballs to them. The menu shows you that he’s delivering Code and Slides through this blog in addition to other posts. The RSS tag that hangs down and swings a little definitely captures the attention and draws people to subscribe. Finally, the title of the blog and the first blog post start drawing eyes down the page to see the meat of the content. But what real content is above the fold on Jeff’s blog? Honestly, there’s none. All of the real content is below the fold so the user has to scroll for it. Going back to the CX Partners post, that’s fine. Users know how to and are willing to scroll for content if they find the page interesting. The *only* thing that I dislike about his header is that it’s a fairly large chunk that takes 3-5 seconds to load the first time. This is a killer if the use
r is only on the page for 3 seconds.

Another great example is any Amazon product page. They have the picture of the product, average user rating and price right at the top. The product detail, related products, the actual reviews and all of the rest of the content is below the scroll line. Obviously, it’s successful for them.

Wrapping up…

Above the Fold is widely miss-understood. You need to realize that this critical section of the page is not about shoving as much content as you can the user. It’s about effectively giving the “Elevator” pitch on your site and getting that longer look that will likely involve scrolling down to see the real content.

Guard the above the fold content and keep it to the essential bits that will tell the user what your site is about rather than trying to give them everything in one big drink from the fire hose. Whenever anyone talks to you about moving a certain section of content above the fold, turn the question on them by asking them how that keeps people on the site over all.

Jared Spool re-convinces me that UX Matters

Jared Spool

Jared Spool is one of my heroes. I go hear him speak every time that I get a chance to and have often retold a number of his stories with various clients. One of the first times that I heard him speak was at the Software Development Conference in 2000.

Jared is a usability expert. That does not mean graphic designer. That means that his expertise is understanding the user and building an experience that is relevant and meaningful in the user’s context.

So what is a “User’s Context”? It’s all of the things that make up your user and how they work. What’s their education level (high school, college, doctorate)? How loud is the work environment (are they on a call center floor? are they in an office by themselves?)? How many and how big are the individual tasks that the user has to perform (is it clicking one button or filling in a 1000 question survey)? Are they wearing gloves while working (such as a mechanic)? Are they familiar with the application (such as an internal application) or are they new to the application (such as a publicly facing web site)? What’s the average tenure of an employee? All of these things and more make up the context for the user and dramatically change the needs of the user for a given application.

He talks about the process that his firm goes through where they start with “Users in the Mist”, all props to Dian Fossey. This involves sometimes 2 or more weeks of just observing the users at work in their natural environment. This gives him a good understanding of the users and how they work so that the software that he’s helping create will slide right into the way that they need to work without them having to spend time fighting to the tools. Sometimes, the result is actually not more software. I know that’s shocking but it’s true. One of these stories ended up solving the worker’s issue with plywood and Christmas tree lights. That’s cool.

I have a tremendous amount of respect for those that have graphic artist abilities because I’ve got none. However, you should not confuse that with usability. This point is very clearly demonstrated in his latest article on his blog – UIEtips: The $300 Million Button » UIE Brain Sparks. In this article, he talks about a fairly straight forward ecommerce site that was loosing millions a year and they couldn’t figure out why. They brought in Jared’s team who after a few weeks of usability testing with real users changed the working on the button for a $300 million dollar jump in profits the following year. The button was pretty enough, functional enough and so on but the user’s didn’t understand the ramifications of clicking the button. That’s an issue that they found through extensive usability testing.

Before you spend a lot of time and money building a beautiful skin to your application, make sure that you understand your users and that you’ve built the application in such a way that it works for them rather than them working for the application.