Access by Design by Sarah Horton (2006)
Introduction by Ben Shneiderman
Three waves of web dissemination 1) users learn about possibilities and get connect, one in six 2) second wave users create web pages, produce content and disseminate ideas, music, photos etc., shift from information access to content generation = ebay, wikis, blogs 3) transformation from information to action, effective international development and innovation education and safe neighborhoods and health care and environmental protection and conflict resolution = requires open discussion and broad participation
Preface
Web has democratized design – both process and attendant responsibilities
Best practices – depends on our definition of users
Stages of web development 1) graphic design 2) user-centered design 3) web accessibility 4) web standards 5) universal design 6) universal usability
Layers of web design (a) function (b) interface (c) content which is the ends if function and interface are the means (Horton focuses on function)
Design and designers – we don’t think of ourselves as designers but we make soup, sand castles, we are not making t-shirts, one size can fit all, the web makes it so
Intro
Designing tools to fit the task so that it becomes part of the task (sleeping in bed, getting time from clock)
*Form follows function (architect Louis Sullivan) observed in nature, this relates to communication being audience driven
Divides visual users and nonvisual users – critical differences and ways of using the web, nonvisual users include text readers and search engines (machine use of web site)
Two basic function of web site 1) communication of information, key is accessibility 2) user interaction, key is functionality
Web is universal because powered by text, test can be read and understood by computers
1) when web content is presented as text then communication
2) when web content is structured then meaningful communication can occur
3) when web pages are operable and functional according to expectations, interaction can occur
4) if web pages are flexible and device-independent, communication and interaction can occur for more users (harder for physical world to be customized, most is fixed in form, with one-size-fits-all someone has to compromise)
Conclusion – designers must compromise, quality site not simple to design but can be as hard as building a site that is not good, need to understand and honor the web, also partnering with users, both are responsibly and collaborative
Feels counterintuitive that users can change elements of web site and violate design conventions, but we cannot make design decisions that work for everybody so users must be able to make their own decisions
Applying conventions undermines the strengths of the web
Design collaboration with users requires two things 1) design for transformation = flexible elements and overall design must hold up to change, keep setting fluid so that settings can be overrode without breaking the page 2) recognize and respect boundaries of user domain, the web gives designer control to users
Chap 1 fundamentals
Design simply “typography exist to honor content”, well designed web site has enough emphasis to spark interest and draw attention to important elements but not to enough to distract or limit functionality
Build fallbacks is one UD strategy, html is generally the most universal format and can be a viable alternative format to address accessibility, html is the web’s native language and web access software such as browsers and search engines are written to read it (not the most powerful of tools but none others are explicated designed to provide access)
More fallback – video might fall back to slide show, then audio, then image and finally text
From mark-up perspective three attributes need to be accounted for 1) keyboard accessibility 2) flexibility 3) user control
Keyboard control means using tab or arrow key to select elements and return or enter key to activate them (two steps), language counts so should be able to understand purpose of element without expanding focus to surrounding context
Web pages are inherently dynamic, design used to be for static items such as posters, books or billboards with only one view in mind, use relative measurements (percentages)
The potential for user customization offers an opportunity to redefine the relationship between designer and user, the boundary between the domain of the designer and the user
Chap.2
Device-independent format is dependent upon separating content and presentation
Creating html documents is not a visual process but an intellectual one, use html for content and use CSS for presentation
Use html mark-up tags to create meaning (structural elements)
CSS allows for reduced web pages cluttered with presentation markup, allow for audible reading of html pages better, can use one master sheet and effect changes across the site more easily and consistently
But pages must be able to function with style (sheets)
Linked (external) style sheets are better than embedded (or inline) ones
Chap. 3 text
Text can be sized, colored, style, copied, pasted, indexed, searched – images and graphics text cannot
Use markup tags to indicate information hierarchy and use flexible widths
Avoid using color alone to convey information
Chap. 4 images
Do not have to abandon images – this would make it difficult for those who depend on images for help
Images are not for “spicing up” or because it is a visual medium, but for providing information, establishing context, providing direction, establishing brand or identity, but images draw the eye first and must be used purposely
Chap. 5 data tables Chap. 6 layout tables
Software cannot distinguish “real” tables from layout tables
Layout is best handled by css, use tables for layout only when necessary
One benefit of structured documents is their ability to be indexed and then discovered by search engine software
Software that reads web pages linearizes tables
For both visual and nonvisual users we need to design code as well as visual display
Chap. 7 frames
Avoid using frames
Chap. 8 lists
Markup lists so that lists (including navigation bars, tabs and breadcrumbs) can be understood by nonvisual users
Chap. 9 forms
Forms should not be sole means of communication with site owners, have alternative methods (email, phone #, snail)
After links, forms are the controls we use most frequently to interact with the web
Importance of labeling
Form design is a process of simplification and clarification, keyboard accessibility needs to be made
Information flow must be predictable, anytime a user can successfully predict what come next, usability is enhanced
Chap. 10 links
We spend much of our time on the web following links, links must be displayed as text
Use descriptive text for links rather than “click here” etc. (doesn’t work for skimming page, will need to expand focus to surrounding context)
First word is important, one most likely to grab user’s attention
Link underlining is a user-defined setting
Differentiate between visited and unvisited links
Use “you are here” orientation
Chap. 11 color
Check out Colour Contrast Analyzer
Do not use color alone
Important to have color differences in brightness and hues (purple and yellow)
Chap. 12 audio and video
Provide alternative formats for media-based content (text)
Chap. 13 interactivity
Web is a client-server application, this allows for navigation to find information but is less functional as a software application, the web does not support page-level interactivity as we have come to expect from desktop and cd-rom applications, links and forms are the only native modes of interactivity
Chap. 14 editorial style
Need for accessible language
Need to be structured for skimming = information broken into segments, and using headings, lists
Skimming is enhanced with initial key words
Chap. 15 page layout
The ultimate test of a web page is how well it performs when read by software
Begin with primary page content as opposed to advertising and navigation links, put content as close as possible to the beginning
Feature creep – extensive navigation options, global navigation, local navigation, page navigation, bread crumbs, link creep
Be context sensitive for navigation, provide appropriate links based on content and available tasks rather than extensive link lists covering every possibility, some backtracking is reasonable
Design is a moving target, designer can only “suggest” attributes