Using A Website

20 Apr

As you may know I occasionally write posts that touch on web design/development. Even more infrequently I sometimes write posts that touch on autism _and_ web design/dev issues. This will be one.

One of the core skills any halfway decent web designer/developer should have is that of making a site accessible. A lot of sites are not accessible. What ‘accessible’ means is ways a designer can code a solution to ensuring that their end product (usually a web page) can be read by as wide a range of visitors as possible, regardless of disability.

A small easy to understand example: blind users may use a device called a Screen reader which basically sits between the browser and the user and does exactly what it says – reads the screen. Most software of this type is far from perfect and much room could be given to making this type of software operate in a more standardised way.

However, as designers/developers we have a responsibility too. We need to use the appropriate markup and to not put extra barriers in place. A small example of a barrier: many of my autism blogger colleagues use Blogspot.com to host their blogs. Its easy to use and free. Good deal. However, they also use comment authorisation routines that include those little graphics of random letters and numbers that a commenter must fill in (official name CAPTCHA). These tests are totally inaccessible. As they are randomly generated and rendered as images, screen readers cannot read the text embedded in the image and thus anyone who utilises a screen reader cannot post on a blog that has a CAPTCHA solution implemented. Google (who own Blogspot.com) are experimenting with audio based CAPTCHA’s to get around this issue.

There are hardware and code-able solutions for users with a variety of physical and cognitive disabilities but its strikes me that autism is…_other_…its not defaultly a cognitive disability and its not defaultly a sensory disability. In fact, its not truly a disability in the strictest sense of the word at all. However, it further strikes me that there are almost certainly a whole host of design/interface issues that face a person who is autistic when they try to use websites. I cannot guess what those may be although I would tentatively surmise that maybe the branding aspects of a design do not have the same level of emotional impact that they would on a non-autistic person.

So what I want to do is throw open the comments to as many autistic people as possible so I can get a sense of what issues (if any) you may face when browsing a website, what works for you, what doesn’t work for you. What are examples of good sites and bad sites. Do you like short pages, long pages, don’t care? What colours are good, or bad? Are icons more intuitive or plain text links? Lots of imagery a good thing or a bad thing? Do websites ever get so ‘busy’ that they lead to a point of overload? If so, why? What _design_ aspects may lead you to purchase via a website – or put you off purchasing via a website?

Let me have it :o) Feel free to crit this site if you feel moved to. Feel free to comment anonymously if you’d rather.

About these ads

19 Responses to “Using A Website”

  1. elmindreda April 20, 2006 at 15:18 #

    In general, the closer it gets to plain old, boring HTML the better, the one exception being less-than-full-width text (for a practical example, see the CSS:ed parts of my site (Google my handle)).

    Strange colour combinations hurt my eyes or even make it impossible for me to read (The ANI page being a prime example of pain).

    Odd, small or non-seriffed fonts are an annoyance, especially with myopia and a 125 DPI screen. Firefox can rescale fonts, but certain CSS settings seem to override it.

    Fortunately, I found the Page Style menu in FF, so I can force the most awful sites into readability.

    Small icons for links are usually also an annoyance, as there’s no common language, the one exception being the usual RSS icons.

  2. Lili April 20, 2006 at 15:52 #

    I’m “only” an Aspie, but in general, the more motion there is on the page, the less readable it becomes for me. I’m so glad that putting 100 animated .gif files on webpages has fallen out of fashion- but even so, I have a Firefox extension installed that lets me stop .gifs that are bothering me.

    I also despise those animated sidebar menus that travel along with the reader when you scroll down the screen- they literally make me nauseated in a pre-migraine sort of way- you can see an example of this on http://www.thenappylady.com .

  3. Kristina April 20, 2006 at 22:33 #

    Thanks for this Kev—-I attended a presentation on web design for the visually impaired last year and have been thinking a lot about how to make things as accessible to as many as possible.

  4. andrea April 20, 2006 at 23:24 #

    For me, most of the “good” web page designs follow traditional good typography and layout.

    THE GOOD:

    * Short paragraph chunks, with a line of whitespace between ‘graphs. I simply cannot track well when the text goes on and on and on and on and on and

    * I don’t know the technical term, but when there are pages with lots of words, I will often squunch my window to roughly 5 in / 15 cm wide for easier tracking (you know, about the width of a paperback book). Good pages are set up so the accompanying graphics etc will float appropriately with the text.

    * On hardcopy, both serif and non-serif fonts are fine (the standard sorts, rather than the artsy sorts which are only useful in short doses). However, sans-serif fonts really read better on screens, especially on older picture-tube type monitors. (Don’t even get me started on flickery monitors or noisy hard drives, either of which give me cracking headaches.)

    * High contrast between text and background color is imperative. That means white or cream and black or navy blue or deep forest green or dark chocolate brown.

    * Sites with the “printer-friendly” option are much beloved for being able to either save the text as a clean pdf (for my own personal reference later on), or just to get all the damn advertising out of the way, or to simply have a single page for reading rather than forwarding through three to five page downloads to read the entirety of an article. What’s neat is that I’ve set my Firefox to default to a pale green for the background color on these, which I personally find restful to the eyes. Boy, once you get used to the ease-of-use in this feature, you start to get annoyed when it’s NOT available …

    THE BAD AND THE UUUUGLY!

    * Animations either annoy the piss outta me or actually make me dizzy, as Lili describes, in that “pre-migraine sort of way”. So I too make use of Firefox’s “Stop the insane animations!” feature (the Escape key on my iBook).

    The exceptions are slowly spinning animations, which make me zone out. Pleasant in a lava-lamp sorta way, but not useful if the author actually wanted something on the page to get read.

    * Midi music. First of all, 99.8% of midi music is auditory crap. Secondly, I have my own music I’m listening to, so I don’t want to hear your little saccharine jingle. Music and cinema sites are exceptions, but for those we get to click on something to make the sound clips start. Regular sites with midi noise usually have it as a non-optional part of the site. Well, those sites don’t get read.

    * Busy backgrounds. Don’t get me wrong — I’m highly visually oriented, with a commercial art background in addition to all the science. Technically, I’m not even dyslexic. But I can hardly read print that’s on a background of any sort of complexity. Save your fantastic graphics for the header borders. Besides, the folks on dial-up will thank you.

    Anyone who pulls out all the stops and uses busy backgrounds and multicolored text and midi music has committed a crime against humanity, and therefore should have all the surfaces in their home plastered with pages from the “Web Pages That Suck” book and have nothing to listen to but “It’s A Small World After All” midi and placed under house arrest.

    * Maybe it’s the bifocal thing, but 13 pt is about as low as I’d want to go for font size. Yes, I have seen smaller on a Web page. It’s insane! These are Web pages, not labels under pinned insects, folks.

    Sure, many pages can have the font size increased (command + on my mac) which is handy for us folks with bifocals or for anyone who is print-impaired, but as Elmindreda notes, this doesn’t always work. Huh. I thought people people put words on the internet so folks would read them, go figure!

    Since you’re asking, Kevin, I often have to up the size of the font on this page (although the font choice and color scheme and layout is very nice, thank you).

    * Multiple font colors send me screaming into the night. Okay, not really. I simply quit the Web page very, very quickly. Given the choice of a Zen garden influenced Web page to a fun-fair midway influenced Web page, I go for simple every time. The medium should NEVER get in the way of the rest of the message.

    * Hyperlinks that are not underlined. Sorry, sometimes there’s just not enough contrast between the body and hyperlink font colors for me to identify them. What’s the point of putting in the hyperlink coding if people cannot easily discern that it’s there?

    Cool subject to discuss; thank you for posting it!

    andrea

  5. elmindreda April 20, 2006 at 23:32 #

    Ah, true. Sensible paragraph size and a resonable amount of space between them is also important (and also not fixable by simple means).

  6. andrea April 20, 2006 at 23:38 #

    P.S. I think you may be right about the “branding” aspect. I am so untuned to advertising and celebrities that I am somewhat unculturated. I think much of the latter is due to my faceblindness. If there’s no useful “real data” in advertisements that is related to something I already have a marginal interest in, then I don’t even slow down for them. I really don’t care about “warm fuzzies” from celebrity tie-ins or bandwagon effects or “status” or worry about appeals to fear. Advertisements that are visually clever definitely make me study them. Don’t ask for any examples — I’ve no idea what the products were…

    P.P.S. I tried to make my sections in the previous post bulleted with asterisks, and instead all those got me was smaller “postscript” font. Argh. Can you correct that, pretty-please?

    andrea

  7. Lori April 21, 2006 at 04:33 #

    *Doesn’t work:*

    * Flash ads
    * most animation with the exception of well done Flash and non-ad video. video should be off as default and user controls should be present to control it.
    * blinking text
    * busy pages
    * background images that obscure text!
    * bright fluorescent background (or text) colors
    * tiny text. not such a big deal since I can resize it with a brower, but nice to have default size that is somewhat readable.
    * inconsistent page navigation
    * icons with no text. icons with text are fine.
    * enough whitespace to keep page areas separate, readable, and easy to locate
    * no margins and/or padding between text and borders
    * music and other sound! exception is if site is a music, band, or movie site.

    *Works well:*

    * dark text on light background
    * line-height of around 1.5em
    * short paragraphs
    * bulleted lists
    * font size of around 12-14px
    * sans-serif normal weight fonts
    * bold text in main content areas only where emphasis is needed. bold links are okay.
    * lighter colored text where information is secondary to main content, such as post dates, author, etc.
    * intuitive and consistent page navigation

    short or long pages are okay. short line length is preferred unless content area has flexible width and browser can be resized to shorten line lengths. images are usually okay and enjoyable to look at as long as they are not moving or obscuring text.

    Example: the left side of this page is much easier for me to read than the right side, mostly due to higher contrast on left. I like the big bold links on the right and also the underlined red links on the left.

    If a site has too much going on, I will leave it after about a second and most likely never return. If I can’t find what I am looking for in about 30 seconds, I will likely get frustrated, confused, and/or sidetracked and leave the site. If the page is so busy that it is hard to easily find the main ideas and relevant content, I will leave. If the line height is too small, I may leave, depending on the length of the content, font, and text and background colors.

    I am most likely to purchase from a website that makes it easy to find what I am looking for and keeps the checkout process short. I like to browse thumbnail images, be able to click for a larger image and description, click a buy button, fill out 1 page of shipping/billing info (two pages can be okay if they are short), and then be thanked and notified that I will receive an email with my order information.

    I will not buy from a website that only provides thumbnail (or no) images, makes it hard to find what i am looking for quickly, is missing a detailed product description, and/or makes the checkout process too long.

  8. Lori April 21, 2006 at 04:37 #

    is textile working? bullets and indents in lists disappeared.

  9. Ms Clark April 21, 2006 at 07:30 #

    I have heard lots of negative comments from ASD folks about orange… but the context of the comments was an idea that the folks a “aspergia.com” or something aspergian wanted AS people to wear some kind of orange wrist band. People could make it out of anything so long as it was orange.

    When it was discussed on aut advo, which doesn’t seem to have much in common with the aspergians… no one commented that they liked orange, and there were plenty of comments of “eeeeuw! orange?? I hate orange!!”

    I know someone who has a strong reaction to green, too. But, it’s possible that the color preferences, while strong, may be distributed all over the color spectrum…

    Just off hand, I’d guess that blue was always safe. (I have gold that pushes the edge up to orange on my blog.)

    Flashing banner ads make everyone nuts, I think.

    the oddizm.com site surely has one of the most goofy and non-standard kinds of lay outs, but I know someone on spectrum who said it was the easiest site, of those that she regularly visited, to use. I think of it as sort of related to an ‘advent calendar” layout. I don’t how others react to it. It’s kind of logical to me, and calm. There’s very little green or orange.

  10. Kev April 21, 2006 at 08:44 #

    All – textile seems to fudging some commands.

    [sigh] – time to start looking for a better way to allow markup.

    Ms Clarke – Meg is vehemently anti-green. We have to disguise her veg ;o)

  11. Ms Clark April 21, 2006 at 09:12 #

    So I’m guessing she’s not anti-orange and you can give her carrots?

    When I was about 3 to 5, I would get some kind of creepy feeling from a certain tint of green. It was kind of like the pale green here on this page, but a little more green…
    I can’t remember exactly, and maybe it was more than one pale green that bugged me, but I think it was between
    99FF99 and 99FFCC. There aren’t any pale green’s that bother me now. There’s a sort of acid avocado green (99CC00 maybe) that was popular here in the 1970’s (one of several weird olive greens from that era) that my friend likes and she’s right on the edge of AS if not AS and has an autistic pre-teen.

    She painted her bathroom walls this color. I think it’s hard to look at, but otherwise, she has excellent taste in decor.

  12. Jannalou April 21, 2006 at 16:05 #

    Kev,

    I made a grayscale version of my web site because I knew that some people would have trouble with the colour scheme and I didn’t want to have to deal with making hundreds of different CSS files to look out for everyone!

    I keep the fonts scalable by setting the sizes by percentage. Still thinking about setting box sizes using percentage, but I’m very aware of how that could backfire completely!

    I’m not autistic, but I have issues with many of the things mentioned above. I also can’t handle a page that is fully white with black text, so none of my web sites have ever used (& will never use) that colour scheme.

    I love this thread, though… what a great idea! I usually ask autistic friends to have a look at my designs, which is how I decided to make the grayscale version. (Too much yellow for one person, and not enough colour contrast for someone else.)

  13. Dad Of Cameron April 21, 2006 at 16:56 #

    “the oddizm.com site surely has one of the most goofy and non-standard kinds of lay outs”

    The Oddizm.com website reminds me of an old garage refrigerator at a cabin in the Sierras (California) I used to stay at while on fishing trips with a neighbor as a teenager. This refrigerator was probably 35 years old at the time, but it still ran great. It was completely covered with funny bumperstickers (probably to cover up rust, but maybe holding the door together too), all different colors, sizes, etc. It was fun to read every year – and still funny. It had one of those big locking hatch handles, and the freezer was a drawer in the bottom. Anyway, the great thing about that fridge besides the deocrated front was that on the inside was a wealth of summer fishing trip supplies: beer (real excitement for a teenager), fresh nightcrawer worms, and frozen snickers bars.

  14. Shawn April 22, 2006 at 00:00 #

    Great discussion. There’s a lot more to accessability than working with a screen reader. It’s good to hear other’s input. In many ways the comments indicate accessability of a site seems very much related to the simplicity of design. One more reason to keep it simple. . .

  15. andrea April 22, 2006 at 00:39 #

    Green is my favourite colour, but I absolutely LOATHE pink. You’ll never get folks to agree upon specific colours.

    I do like the idea of greyscaling something to check the contrast; very nice work, that.

    andrea

  16. andrea April 22, 2006 at 04:27 #

    Ms Clark said, “When I was about 3 to 5, I would get some kind of creepy feeling from a certain tint of green. It was kind of like the pale green here on this page, but a little more green…”

    Now, that is weird — me, too. I think mine was that institutional pea-green. I don’t know where from, but I’ve an odd collection of unsettling half-memories that I’ve never quite gotten officially identified, and likely never will (my mother is dead, and my dad never seems to remember anything I ask him about).

    andrea

  17. ebohlman April 22, 2006 at 08:46 #

    Most of the complaints I’ve seen here are exactly the sorts of things that Jakob Nielsen has been hammering away at for almost ten years. Way too many Web sites are designed for 19-year-old eyes (low contrast, tiny fonts, “mystery meat” navigation, etc.). Most of the common blunders make sites NT-unfriendly, let alone AS-unfriendly or ADHD-unfriendly.

    Lori said: If a site has too much going on, I will leave it after about a second and most likely never return. If I can’t find what I am looking for in about 30 seconds, I will likely get frustrated, confused, and/or sidetracked and leave the site. If the page is so busy that it is hard to easily find the main ideas and relevant content, I will leave. If the line height is too small, I may leave, depending on the length of the content, font, and text and background colors. As Nielsen and others have said, on the Web you’re one click away from oblivion. If your site design/structure turns off one of your users, they won’t complain to you. They’ll just go somewhere else. Annoy your users at your own risk. Design a site where the only goal is to please yourself, and you’ll be the only viewer (at which point you’re using the Web as a slow and expensive substitute for a hard drive).

  18. Kev April 22, 2006 at 09:42 #

    ebohlman – Nielsen makes the occassional good point but its difficult to take someone seriously as a web usability expert when his own site is such an unusable mess.

    Usability and accessibility are differing concepts really. Usability stems from HCI (human computer interaction) whereas accessibility is about ensuring *all* users of your site (both human and non-human) can get to the content easily.

    A small example of the apparent paradox of usability vs accesibility: checkpoint 3.4 of WCAG 1.0 states that relative units of measurement should be used, thus creating a totally liquid layout. However, usability guidelines suggest a fixed sentence length ensures maximum readability of content.

    I’ve written about accessibility strategies and usability principles in depth before.

  19. bonni April 22, 2006 at 14:45 #

    “mystery meat” navigation

    That phrase was, as far as I’m aware, coined by Vincent Flanders, whose approach to usability and design is a lot more approachable, readable, and practical than Nielsen’s.

    bonni

Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 1,058 other followers

%d bloggers like this: