- Accidental Creative
- Adapting to Web Standards: CSS and Ajax for Big Sites
- Art of Non-Conformity
- Art of Readable Code
- Back to the User: Creating User-Focused Web Sites
- Beginning PHP6, Apache, MySQL Web Development
- Books to Read
- Born For This
- Complete E-Commerce Book
- Core PHP Programming
- CSS3: Pushing the Limits
- Dealing with Difficult People
- Defensive Design for the Web
- Deliver First Class Web sites
- Design for Hackers: Reverse-Engineering Beauty
- Designing Web Interfaces
- Designing Web sites that Work: Usability for the Web
- Designing with Progressive Enhancement
- Developing Large Web Applications
- Eat That Frog
- Economics of Software Quality
- Elements of User Experience
- Extending Bootstrap
- Flexible Web Design
- Flexible Web Layouts
- jQuery Pocket Reference
- Letting Go of the Words
- Manage Your Day to Day
- Official Ubuntu Book
- Organized Home
- PHP In a NutShell
- PHP Refactoring
- PHP5 CMS Framework Development
- PHP6 and MySQL Bible
- Responsive Web Design
- Responsive Web Design with HTML and CSS3
- Rules of Thumb
- Saleable Software
- Securing PHP Web Applications
- Seed Underground
- Simple and Usable Web, Mobile and Interaction Design
- Smart Organizing
- Submit Now: Designing Persuasive Web sites
- The Life-changing Magic of Tidying up
- Web site Usability
- Web Site Usability: A Designer's Guide
- Web Word Wizardy
- Work for Money, Design for Love
Architecture Representation Best Suited for Role
An outline or tree diagram, with levels clearly indicated, a detailed list of pages, and navigation labels and content for every page.
A page schematic with navigation and content requirements for each page.
A comprehensive list of pages with detail about each page. For ease of testing, this list of pages can be online, and each page listed can link to the corresponding page within a wireframe, so that the content of each page can also be verified.
An outline or tree diagram for annotating during testing, and a wireframe for actual testing.
An outline or tree diagram, indicating final labels, the number of options at each level of the hierarchy, and how much site navigation is displayed on each page.
Clients who act as decision makers
A sexy diagram (presentation-quality) with detail corresponding to the business end of the site
Clients who act as content providers
An outline or tree diagram, to decide on completeness, and a page schematic indicating navigation labels and content requirements for each page.
- Procedural analysis - analyze procedures people perform for an individual task. Consider the pages a user will navigate to accomplish his or her goal. What procedures the user will utilize within each page?
- Job analysis - set of all tasks a person performs as part of a job or to achieve a goal.
- Workflow analysis - flow of information and control that is necessary to complete a process that may include multiple people and multiple tasks.
- Error analysis - determines where, when and under what circumstances errors will occur.
Human Error Tolerant Design
Human Error Tolerant Design
- Prevention - eliminate potential for error
- Reduction - reduce likelihood user will get into an error state by ensuring user is aware of action consequences, train users on normal and error recovery procedures.
- Detection and identification - if user does err, the system makes it easy for user to detect and identify the error
- Recovery - ensure system facilitates rapid correction, task resumption and movement to a stable system state
- Mitigation - minimize damage or consequences of errors.
- Use terminology from your site (ex 55 products found, 55 photos found)
- Repeat search query on page
- Specify the number of results found
- Provide title and description for each result
- Help users find similar documents
- Too many results? Categorize them to help narrow their queries
- Keep the number of visual vertical lines simple and few (four or fewer)
- Reduce the number of attention grabbing elements
- Contrast, make similar things look similar, different things look different
- Repetition - consistent repetition brings unity
- Thumbnail sketches
- Paper mockups (viewed as conceptual)
- Digital mockups (viewed as unchangeable)
- Examine a small portion of the site in detail.
- Sequences or snapshots that focus on possible actions and movements a user make take through the site
- Capture the site's major functionality (or subset of the site)
- Focus on structure, scope, and detailed processes
- Focus on navigation and architecture, but also test labeling and categorization, branding issues, basic user interface capabilities
- Draw the user in, help reader orient, and convey information
- Write to help people navigate the site. Make steps clear, state options where available
- Short sentences, simple words, active sentences
- Deliver complete and accurate information, present information in useful format for reader, achieve consistent and natural style (no types or errors)
- Coordinate among multiple writers drawing from a variety of sources
Web Writing Style
- Refer to company in first person
- Refer to reader in second person
- User direct, simple sentences
- Divide text into easy to read chunks
- Factual and content-rich information
- Main themes at top of page
- Lists as bulleted items, not prose
- Clear section titles, liberally use headings (help user find information)
- Avoid ambiguity
- User straight quotes
- Avoid educated words, overly formal writing is a mistake
- Do not let a link cover punctuation or cross multiple lines
- Use meaningful words in link titles
Establish Design Parameters
- Gather as much information as possible about client (examine marketing, promotion and public relations materials).
- Find out what material they like
- Establish targeted style, voice, and point of view of site
- Prepare list of competing websites - how are they successful>
- Establish design elements based on style
- Check colors in grayscale - do they still work?
- Establish a style guideline for all online forms
- Label steps numerically (include total number)
- Include an introductory statement
- Labels on left hand site of elements (and right aligned).
Usability of Web Technologies
- Does this technology provide real value to the user?
- Is it cross-platform?
- Is it standard (do we need user to download plug-in)? How much of user's time will be saved?
- How will users use it?
- How much learning will it require?
- What are overall benefits to users and providers?
- What are development and maintenance sots?
- Will extra complexity add significant risk to project?
Top Ten Web Guidelines
- Content and Scope
- Is content appropriate?
- Scope broad enough to satisfy user's requirements?
- Is info useful?
- Are features sufficient?
- How clear is organization?
- Can users find their way?
- Is navigation bar well organized?
- Are parts missing?
- Are relationships between main and subsections clear?
- Appropriateness to task
- What are user's tasks and does site reflect structure of tasks?
- Visual design
- Does design have simplicity, consistency, and focus?
- Does visual organization structure the task of working with the page, providing emphasis and visual flow?
- Is it attractive and uncluttered?
- Does it reinforce tone and message of site?
- Does it work for range of users and computers?
- Is everything presented in simplest, most straightforward way?
- Is language simple and direct?
- Is text too wordy?
- Are pages too numerous?
- Are pages cluttered?
- Consistency and contrast
- Does it have a consistent message and style with organization's print material?
- Error handling
- Does system prevent users from entering inappropriate vales?
- Are bad values detected early?
- Is error recovery quick and efficient?
- Respect for the user
- Are you putting user's privacy or security at risk?
- Are you misleading them, wasting their time, or trapping them into a path they don't wan to be on?
These are notes I made after reading this book. See more book notes
Just to let you know, this page was last updated Wednesday, Mar 21 18