Every bullet point below links to an article
Skim for an idea that interests you and click on it to read more.
(Many of the articles follow an inverted pyramid writing structure, which means that my summaries sometimes include no more information than the article’s first paragraph, but in every case I have read through the entire article so that my summary will be accurate and not omit anything essential.)
Lists of principles
- Principles of interaction design
- Principles, issues, terms, and rules of usability
- The basics of UX
- The basics of information architecture
- The basics of eye-tracking
- A “periodic table” of SEO
- potential hazards of SEO
- top 10 web design mistakes
- the basics of usability
- some features of a social intranet
Lists of example sites
- Use a zig-zag layout to increase visual interest and enable skimming of a page.
- Expect users to skim most pages in an F-shaped pattern. Break them away from skimming past long pages by inserting an awkward element into an otherwise normal pattern.
- A Z-shaped layout works well for a simple page culminating with a call to action.
Align text with a baseline grid. ( Ditto in this article.)
- Place calls to action in the lower right.
- Place OK buttons adjacent to the right of cancel buttons and in the lower right of the dialog box. (Use more descriptive words than just “OK” on the buttons.)
- Take various factors into account when deciding what eye-tracking system to purchase.
- Users will ignore images which convey no information relevant to their current task.
- Expect that users who read top-to-bottom, left-to-right will move visually down any page following this same pattern. Use design to convey information, not just to look pretty.
How Users Read
- Don’t expect visitors to read your site.
- Create your content assuming it will be skimmed.
- If the content is well-written enough, users will switch from skimming to reading.
- Use white space.
- Include facts to keep your reader’s attention.
- When reading on-screen backlit text, users will read slower with margins but will comprehend more and be more satisfied than without margins. Users prefer wider leading.
- Place related materials together so that users browsing with banner blindness and tunnel vision will still see both and know they’re related.
- Screen resolution continues to increase, meaning that serif fonts are gradually growing readable on screens.
- Test content comprehension, not just interface usability, with users. Reading comprehension tests, including reading level metrics and Cloze tests, can help to gain an initial sense of whether a text is appropriate for a given audience prior to testing.
- Make primary action buttons stand out so that a user will hesitate before selecting an option outside of their normal task flow.
- The paradox of white space is that the absence of content draws the eye toward content.
- Make font 16-pixels or larger because users who have trouble seeing it often don’t know they can resize it and because print on a screen (unlike traditional print on paper) doesn’t cost more to display larger and is often viewed from a greater distance.
- The concept of kairos emphasizes the need to get the right content to the right audience at the right time.
- Consider BBC News as an exemplar of usable headlines.
- Understand the meanings of particular colors, which are subjective but nevertheless well defined within cultures.
- Combine colors which are similar or different by various metrics to create coherence balanced with visual interest.
- Create a coherent color scheme using one of several established methods.
Resources to create color schemes:
- To create an information architecture, begin by asking questions of everyone involved and then filtering the answers to define the site’s goals and the target audience. Have stakeholders rank the goals to create a master list of site goals.
- To get a sense of how people will use the site, create a prioritized list of audiences and their goals, then create scenarios of how they will need to interact with the site. See how competitors’ sites fulfill these needs.
- Incorporate ideas from all stakeholders to determine needed functionality and to define initial categories of content.
- Create a site map and navigation using metaphors if possible.
- Don’t waste screen space.
- Choose a form of carousel depending on whether you’d rather affect the user’s impression of navigational ease, impression of relative importance of pages, actual use of the carousel, or tendency to look at other elements nearby.
- Give users a clear path to the information they’re searching for rather than worrying about the number of clicks needed to get there.
- Attract users with features, but then limit the number of options available at one time.
- Expect users to satisfice.
- Make sure that navigation by links is clear because most users will only use search as a fallback option.
- Don’t ascribe too great an importance to the homepage.
- Understand the different types of navigation pages and the different levels of navigation hierarchy.
- Users will scroll below the (variably-located) “fold” of a page, but they should be able to tell what a site’s purpose is without scrolling. Once they reach the page bottom, there should be a next step presented to them.
- Use one long page for an article rather than several short ones.
- Include icons in the navigation, and get user feedback on them as well as navigation terms. Terms should be distinct. Make sure that the icons and terms agree in order to avoid Picture Word Interference.
- Use mega menus rather than multi-level hover menus
- Follow these best practices when creating mega menus.
- On mobile apps with more than one main page, avoid side navigation (aka hamburger menus, aka side drawers).
- Use the word “menu” rather than a hamburger icon on a mobile site.
- Avoid making content too flashy or else users will mistake it for adds.
- Expect users to ignore ornamental graphics.
- Only include graphics that convey information. (Use navigation and content graphics; limit ornamental graphics intended to convey an intangible, emotional message is).
- Don’t use icons without labels.
- If you have many icons, use distinctive outlines for each.
Accessibility and adaptability
- Accessibility is worth the effort.
- Accessibility doesn’t mean a bad visual design.
- Make various small changes to improve accessibility.
- The web needs to break away from its fixed roots in the printed page to allow for adaptability.
- Make websites respond to more than just screen size. Making sites more accessible to people with disabilities can also make them adaptable to a larger range of devices.
- Three thresholds indicate users’ perceptions of how quickly the computer responds.
- Allowing users to undo is better than requiring them to confirm because it doesn’t slow them down and it allows them to change erroneous actions.
- Simplify mobile forms in various ways.
- Use “your” if you want the interface to appear social and “my” if you want to present it as an extension of the user.
- Although slow interface response times are a much more common problem, it’s possible for an interface to be too fast for actions not initiated by the user. It’s too fast if it changes faster than the user can notice or understand.
- Don’t assume that your users are like you.
- Understand the “curse of knowledge”; don’t expect others to approach things with your knowledge base or recent context.
- Use the anchoring effect to influence users’ later ideas with an initial impression.
- Describe what the user does, not what the program does.
- Focus on functionality over appearance. (But recognize that aesthetics still matter.)
- The longer a user has been on a page, the more likely she is to remain on that page. To keep a user, show her the page’s value within the first ten seconds.
- Teens browse similarly to adults but with lower reading skills and less patience. They dislike chrome, delays, and being talked down to.
- As with teens, it’s not true that college students are technology wizards or that they crave multimedia or social networking. In contrast with teens, college students are more goal oriented, better at reading, and more demanding of evidence. They prefer search over navigation.
- Seniors use a wide variety of websites, but have greater difficulty. Clearly marking visited links and keeping navigation consistent can help to compensate for seniors’ poorer memory. Seniors are more than twice as likely to give up on a task; they blame themselves for failure 90% of the time.
- Users will ignore a carousel that moves on its own, especially if that carousel has “content-free content”.
- Design with familiar patterns to avoid confusing your users with unfamiliarity.
- Make redesigns gradually to avoid annoying your users with big changes.
- Provide users with the information they most want to gain their trust. Don’t reduce complexity by hiding essential information in rollovers.
- Facilitate your offboarding process to ensure that people’s last experience with your product is not a negative one to share.
- Watching sci-fi movies can give a good opportunity to practice fundamentals of observation: looking for pain points, articulating the unspoken, attaching numbers to things, noticing what does not happen, being descriptive (not interpretive), and questioning assumptions.
- Use Amazon’s Mechanical Turk for quick, cheap studies.
- Find out how people actually use your product.
- Don’t assume that people can tell you what they want.
- Don’t assume that a focus group can fill the place of usability testing.
- Small, inexpensive usability tests can be highly effective.
- Design to create a positive experience, not just a usable product.
- Increase stakeholder buy-in of usability testing by testing early, testing often, and involving stakeholders in some of the tests.
- Users are important stakeholders too, and can be represented through frequent tests. Recruit them by usage pattern rather than any other demographic.
- Small tweaks can have large effects.
- Understand why usability test success rates are so low and why it matters.
- Trust the findings of outside studies when they draw from a diverse user base and test diverse factors so that their study is more likely to generalize to your own context. Create such studies yourself.
- Use the System Usability Scale (SUS) test to gather reliable information from a small sample. Know what the test is and how to interpret it.
- Know what personas can do for you.
- Understand the basics of persona creation.
- Use a proto-persona creation activity to get executives interested in users. Have them complete a design studio with the new persona to support buy-in. Involve all stakeholders and map the personas to goals in specific parts of a site.
- Understand the history of personas and several common persona attributes.
Wireframing and Prototyping
- Use paper prototypes to incorporate feedback from diverse (including non-technical) groups inexpensively. You can also collect user feedback directly on the paper either by annotating how they interacted or by letting them draw their ideas.
- Design around the content. Don’t use dummy content when creating a design.
- Copy design features only if you understand why the originals work well.
- Use wireframes initially to brainstorm, then subsequently to constrain ideas to a plan.
- Use mood boards to speed up creation of mockups and to increase client buy-in.
Business of UX
- As an advocate for the needs of the user, a UX designer can bring much more to the table than just traditional deliverables.
- Present yourself well to UX hiring managers.
- Interviewing by working on a project collaboratively can give a holistic picture of the interviewee.
- UX and QA are closely related.
- The best way to evangelize UX to executives is to use it to solve a problem their facing with concrete metrics.
- Follow these steps to collaboratively create a design.
- Run a design studio using 6-hat thinking and/or brainwriting.
- The challenges of a magical system that make for a good work of fantasy can be inverted to make good usability, and vice versa.
- Cognitive processing depletes willpower and vice versa. By avoiding unnecessary cognitive processing, good design can avoid depleting users’ willpower.
- Designed badly, technology could lead to a totalitarian society, something which good UX may be able to present.
- Good UX (like good sci-fi) should explore how technologies impact society, rather than promoting new technology for technology’s sake.
- Empathic thinking and analytical thinking inhibit each other. The mindfulness of yoga can help to practice empathic thinking—observing without judging—which is helpful in removing constraints from ideation and removing attachments to particular design features. An open posture can support an open mind.
- Developing UX in a company takes time and goes through predictable stages in order. Developing fully can take 20 years.
- Four elements of gamification are hyperfocus, timers, quick feedback, and discrete, manageable sessions. (Ironically, the writer includes “timers” on this list, even though she says that “A good video game completely eliminates the sense of time passing” to create flow.)
- Use HTML5
data-attributes to simplify the markup (by avoiding the need for additional elements to store metadata).
- Open external links in new tabs.
- Make it responsive.
- Use the HTML5 history API make URLs appear to change for the user while making the page more efficient by avoiding a full refresh.
- Decrease actual and apparent page load times.
- Format media for print by using CSS in a print media query to remove backgrounds, adjust fonts, and format hyperlinks.
- Recognize the limitations of HTML5.
- You can use CSS to display generate simple, repeated content such as list numbering.
- Implement mega menus without a delay or hover tunnel.
(Research papers have greater depth and subtlety than other articles but lack the depth of books so I’ve decided to categorize them separately. Once I get enough of them, I’ll move them to their own page.)
Mobile Usage and Usability
A Large Scale Study of Wireless Search Behavior: Google Mobile Search (2006) by Maryam Kamvar, and Shumeet Baluja.
- Query length is similar between mobile and desktop (including laptop) contexts, but mobile queries take longer and the number of queries per session is lower.
- All kinds of queries are performed on both desktop and laptop platforms, but there are differences in the categories of most frequent queries. The greater prevalence of adult-category queries on mobile suggests that people feel their mobile browsing is more personal and private than desktop browsing.
Understanding Mobile Web and Mobile Search Use in Today’s Dynamic Mobile Landscape (2011) by Karen Church and Nuria Olivier
- Mobile devices are increasingly used in stationary contexts.
- This diary study looks at the motivations and contexts in which searches are performed rather than just trying to infer information from the logs.
- Queries performed in mobile contexts are more likely to be considered urgent.
- Mobile devices are commonly used in intimate social settings.
Depth and Breadth Away from the Desktop: The Optimal Information Hierarchy for Mobile Use. (2006) by Arjan Geven, Reinhard Sefelin, and Manfred Tscheligi
- Some earlier research (on desktops) shows that users perform better in terms of both time, errors, and perceived complexity on broader hierarchies, and some shows that there is a tradeoff between breadth and depth, with the best hierarchies at neither extreme.
- The negative impact of having to scroll to see the current options is greater than the negative impact of a narrower hierarchy, meaning that users prefer narrower hierarchies on smaller screens.
Information Needs and Practices of Active Mobile Internet Users (2009) by Toni Heimonen
- Mobile web search is more common when users’ information needs are hedonic and is the primary search method to address trivia queries.
- Direct access of websites is more common when users’ information needs are pragmatic and is the primary search method to address transportation needs.
- About two thirds of “mobile” access occurs in a stationary location.
- Expert mobile users (or at least users with flat-rate data plans) may be more likely to address information needs when they occur.
Improving Web Search on Small Screen Devices (2003) by Matt Jones, George Buchanan, and Harold Thimbleby
- The most common cause of failure to find the information sought in a Google search was screen size, particularly the inability of the small screen to show the large pages linked to in the search results.
- The authors suggest that for small screens, search results could be presented in more effective ways, possibly (1) creating a hierarchy of results organized by topic that users can click through until they refine the results to the topic they’re looking for, or (2) showing keywords for the search results instead of titles and URLs.
Usability Guidelines for Designing Mobile Learning Portals (2006) by Daniel Su Kuen Seong
- This article proposes a set of best practices in evaluating mobile usability for a learning portal, including reducing scrolling (to increase reading speed) and reducing page changes (to decrease perceived complexity).
- The best mobile interface will present only the most pertinent information to increase speed and decrease complexity.
Mobile Web Browsing: Usability Stud (2007) by Sujan Shrestha
- Persistent navigation shouldn’t take up too much of the screen on a mobile device or else users may not realize that the page has changed when they click on a link.
- Forms present a significant barrier to mobile task completion.
- Omitting on the mobile version of a site something that was present on the desktop version can confuse users if they look for it.
A Framework for Understanding Mobile Internet Motivations and Behaviors (2008) by Carol A. Taylor, Ona Anicello, Scott Somohano, Nancy Samuels, Lori Whitaker, and Judith A. Ramey.
- The authors observed eight categories of mobile behaviors, which fall into three larger categories: info seeking(status checking, browsing, information gathering, fact checking), action support(in-the-moment, planning), and info exchange (transaction, communication).
- They found that the motivations for internet use fell into the two utilitarian categories of awareness and time management and the four hedonic categories of curiosity, diversion, social connection, and (rarely) social avoidance. The most common motivation was awareness, generally satisfied by checking a status.
Characterizing Web Use on Smartphones (2012) by Chad Tossell, Philip Kortum, Ahmad Rahmati, Clayton Shepard, and Lin Zhong
- There are two types of mobile users, those who prefer to search with a browser and those who prefer to use the native apps as a form of bookmark.
- Browsers provided sporadic access to a wide variety of resources, whereas a set of native apps were used more regularly. Many other native apps were only used once and were often uninstalled.
- Use of native apps increases over time relative to browser search. Web designers should promote the installation of native app versions of their sites to increase the probability of revisits.
- “Compared to PCs, browsers on smartphones are accessed less frequently, for shorter durations, and to visit fewer pages” (2771).
Planning, Apps, and the High-end Smartphone: Exploring the Landscape of Modern Cross-device Reaccess (2011) by Elizabeth Bales, Timothy Sohn, and Vidya Setlur
- Phone-to-desktop and desktop-to-phone re-access of content occurs with comparable frequency.
- Common reasons for reaccess on phone after intial access on desktop were location, time, wanting to show something to friends, and mobility barriers. Common reasons for reaccess on a computer after inital access on phone were a technical barrier or splitting up tasks (such as accessing a recipe at a store and again in the kitchen).
- Re-access of identical content is often unplanned.
Diversity in Smartphone Usage (2010) by Hossein Falaki, Ratul Mahajan, Srikanth Kandula, Dimitrios Lymberopoulos, Ramesh Govindan, and Deborah Estrin
- It’s important to determine individual resource use for smartphones because their greater app variety will give them greater variance in usage than traditional cell phones, and their lack of stable resources (such as power) that laptops have makes it more important to optimize their efficiency.
- On every metric they studied, users differed by one or more orders of magnitude, meaning that trying to serve an average user will not serve users at the extremes of usage nearly as well as customizing will.
- The relative popularity of various application types was roughly the same regardless of whether the users were heavy or light users and regardless of those users main motives for owning a smartphone.
How People Use the Web on Mobile Devices (2008) by Yanqing Cui and Virpi Roto
- User mobile access patterns fall under the traditional categories of information seeking and communication/transaction. The authors add the category of personal space extension because people can save things from anywhere, but without risk of loss of saving on an individual mobile device.
- On low bandwidth devices, Wikipedia is popular compared with search engines because it takes much of information that individual webpages would have and presents it as one synthesized result, presented immediately rather than behind further links.
A Meta-Analytical Review of Empirical Mobile Usability Studies (2011) building upon A Research Agenda for Mobile Usability (2007) by Constantinos K. Coursaris and Dan J. Kim.
- Based on 100 papers published in the previous decade, the authors propose a usability evaluation framework for mobile environments, identifying four contextual factors (user, technology, task/activity, environment) which impact various key usability dimensions (such as efficiency, errors, ease of use, effectiveness, satisfaction, and learnability), thus causing various consquences (such as improved integration, increased adoption, retention, and loyalty).
- They found a lack of research on mobile devices about accessibility or about the impact of aesthetics or involving unstructured tasks.
Eyes Don’t lie: Understanding Users’ First Impressions on Website Design using Eyetracking (2011) by Sirjana Dahal
- People demonstrate greater happiness and arousal when looking at sites they like.
- People spend longer looking at sites they enjoy.
- When forming first impressions, users fixate longest on the navigation and body of a page.
How People Recall Search Result Lists (2006) by Jaime Teevan
- If you know what parts of an information display are memorable, you can draw attention to important changes by making them in the memorable areas and can hide insignificant changes by making them in the unmemorable areas.
- Results presented earlier and results that are clicked are more likely to be recalled.
- People tend to remember results as having been ranked higher than they actually were, probably as a result of remembering the results that are relevant to their own interests and that they feel should have been ranked near the top of the list.
Intrinsic and Extrinsic Motivations: Classic Deﬁnitions and New Directions (2000) by Richard M. Ryan and Edward L. Deci
- Motivation has traditionally been viewed as a unitary concept: either a person is motivated or not. This view has shifted to accommodate a difference between intrinsic motivation (finding pleasure in the task itself) and extrinsic motivation.
- The authors further break extrinsic motivation down into four categories, depending on how much it has been internalized: external regulation, introjection (involving the ego), identification (approved by oneself), integration (tied to one’s sense of self)
- The main components of Self-Determination Theory (autonomy, social relatedness, and competence) help people to become more internally motivated. Of the three, autonomy is most strongly required to move to the more internal stages of extrinsic motivation.
The benefits of multimodal information: a meta-analysis comparing visual and visual-tactile feedback (2006) and Comparing the effects of visual-auditory and visual-tactile feedback on user performance: a meta-analysis (2006) by Matthew S. Prewett, Liuquin Yang, Frederick R. B. Stilson, Ashley A. Gray, Michael D. Coovert, Jennifer L. Burke, Elizabeth Redden, and Linda R. Elliot
- These meta-analyses found that visual-tactile feedback is more effective when multitasking under pressure and visual-auditory feedback is more effective with single low-stress tasks.
- The addition of the tactile modality reduced reaction time and supported navigation and target acquisition tasks, but had no impact upon error rate and no benefit to communication tasks.
Using Non-Speech Sound to Overcome Information Overload (1997) by Stephen A. Brewster
- The inclusion of background sounds to visual tasks can help to overcome information overload, enabling faster responses to errors.
- Because they were useful, the sounds were not perceived as annoying.
- The addition of sound did not improve the performance of the best partcipants, but helped the poorer ones.
Assessment of Cognitive Load in Multimedia Learning Using Dual-Task Methodology (2002) by Roland Brünken, Susan Steinbacher, Jan L. Plass, and Detlev Leutner
- Earlier studies demonstrated that audio-visual communication was more efficient that text-and-visual communication and assumed that the difference was caused by differing levels of cognitive load. This study used a secondary task to assess the cognitive load directly.
- The cognitive load was greater for text-and-image presentation than for audio-visual presentation.
- Reaction times were fastest when the only task was to react. Introducing another task, even a multimodal one, slowed reaction times.
A Split-Attention Effect in Multimedia Learning: Evidence for Dual Processing Systems in Working Memory (1998) by Richard E. Mayer and Roxana Moreno
- Students can integrate words and images more easily when the words are presented as audio rather than text. This increased learning may be a result of both auditory and visual channels being in working memory simultaneously.
When Redundant On-Screen Text in Multimedia Technical Instruction Can Interfere With Learning (2004) by Slava Kalyuga, Paul Chandler and John Sweller
- Presenting the same information in both auditory and visual forms can have a negative effect on comprehension because of mental effort wasted reconciling the identical streams of information.
- Whether a redundancy effect (simultaneous presentation of identical materials is hard to synthesize) or a split-attention effect (sequential presentation is hard to synthesize, simultaneous easy) occurs can depend partially upon whether the users are experts or novices.
Multiple resources and performance prediction. (2002) by Christopher Wickens
- Wickens’s Multiple Resource Model predicts greater interference between tasks if they share
- stages (perceiving and thinking vs. responding)
- sensory modalities (auditory vs. visual).
- codes (right-brained spatial vs left-brained verbal)
- visual channels (focal vs. peripheral)
- Wickens propses a matrix by which workload could be calculated as a combination of intra-task difficulty and -inter-task interference.
- The benefits of multimodal presentation may not be based in cognitive resources but rather in difficulties from scanning (between multiple visual stimuli) and masking (of one auditory stimulus by another).