This is a small collection of design and graphic user interface usability observations, tips, tricks and how-to's, I've collected over three decades. It's random, unsystematic and by no means a replacement for such serious knowledge treasuries like Ask Tog or Nielsen-Norman Group or UX matters site.

This part is always "under construction", always in the process of being enriched and updated.

Cartoons are courtesy Victor Bogorad

  Click on any topic on the left to read more.
Affordances or Cues

James Gibson wrote about the idea of affordance in 1979. He described affordances as action possibilities in the environment. In 1988 Don Norman modified the idea of affordances in his book The Design of Everyday Things. He referred to the idea of perceived affordances: if you want people to take action on an object, whether in real life or on a computer screen, you need to make sure that they can easily perceive, figure out, and interpret what the object is and what they can and should do with it.

Think about affordance cues when you design. By giving people cues about what they can do with a particular object, you make it more likely that they will take that action.


Things beyond our control

"A lot of convenience and power could be gained, and a lot of unhappiness, irritation and missed opportunities avoided, if the industry thought about design, instead of always making it the last thing on the list." - David Gelertner





A bit of Behavioral Psych

"Knowledge is knowing a tomato is a fruit.. Wisdom is not putting it in a fruit salad."

Our Brain Capacity
The human brain is capable of 1016 processes per second, which makes it far more powerful than any computer currently in existence. But that doesn't mean our brains don't have major limitations. The lowly calculator can do math thousands of times better than we can, and our memories are often less than useless.

How many clicks are too many
Clicks reduction, as the only way to minimize the process time, has recently become an obsession in UI design. The truth, however, is more complicated.

  • 3-click away principle is a MYPH. In more than 200 user studies users never complained about number of clicks.
  • Each click is a decision point. It's crucial to make user sure what content he will find when he clicks.
  • Vague, nondescript (various "click here" or "learn more" that assume the user IQ being less than his shoe size), misleading or jargon-filled links cause people to hesitate, to ponder whether this is the right decision. This amplifies the click itself and it is what has created this myth of too many clicks.

+ -
The total time user spends is a sum of human and machine actions. One can measure it using CogTool or use data provided by Card, Moran and Newell in 1968, called CMN-GOMS methods.
  • Eye fixation - 230[70, 700] milliseconds
  • Eye Movement - 30 milliseconds
  • Perceptual Processor - 100[50, 200] milliseconds
  • Cognitive Processor - 70[25, 170] milliseconds
  • Motor Processor - 70[30, 100] milliseconds
  • Press a key or button (K)
  • Best typist = .08 seconds
  • Good typist = .12 seconds
  • Average skilled typist = .20 seconds
  • Average non-secretary = .28 seconds
  • Typing random letters = .50 seconds
  • Typing complex codes = .75 seconds
  • Worst typist = 1.2 seconds
  • Point with a mouse (excluding click) (P) = 1.1 seconds
  • Move hands to keyboard from mouse (or vice-versa) = .4 seconds
  • Mentally prepare (M) = 1.35 seconds
  • Wait for a computer to respond to input (R) - vary

While it’s hard to predict “R”, it's clear that the goal is to reduce "P" and "M". "P" time will increase exponentially, if the number of active (clickable) elements exceeds 8-12 (the approx. number of things one can grasp simultaneously). Alas, "M" time is the true test of how intuitive your UI is.

How to reduce “M” or predictive behavior of “next”.

Try to define all possible “next” actions in order of probability. A mental model of a task is typically streamlined and focused on the fundamental components of the task. Although there may be myriad optional details associated with a given task, the basic components should not have to compete with the details for the user’s attention. This is your Main Task, it defines the next move. I call this "next defines now" rule.
+ -
Cognitive Biases in Bounded Rationality

Developed by Herbert Simon in late 40-ies, the Bounded Rationality is the idea that in decision-making, rationality of individuals is limited by (1) the information they have, (2) the cognitive limitations of their minds, and (3) the finite amount of time they have to make a decision. While we can do little to change (1) and (3), we can take (2 - the cognitive biases) into consideration. Cognitive biases are glitches in our thinking that cause us to make questionable decisions and reach erroneous conclusions.


Confirmation Bias: we love to agree with people who agree with us. It’s an unconscious act of referencing only those perspectives that fuel our preexisting views. Be reasonably conservative; follow the most established examples.
In-group Bias: a manifestation of our innate tribalistic tendencies. Appeal to a group of users, criticize competitor's ways and practices.
Gambler's Fallacy: if it worked ones, it'd most likely work again. Imagine if it worked twice... Don't expect your customers to easily fall for something they didn't do before. Hot hand luck. Your outsider position may be a plus.
Post-Purchase Rationalization or Buyer's Stockholm Syndrome: users, who bought into less than perfect solution, will do anything to rationalize using it.

Observational Selection Bias: noticing things we didn't notice that much before, because we bought into those things.

Status-Quo Bias: we like to stick to our routines. If it ain't broke, don't fix it. Negativity Bias. Dwelling on negativity at the expense of genuinely good news. Don't expect users to notice many improvements over remaining flaws.

Bandwagon Effect: if you get at least few of the stakeholders to accept it, chances are you're golden.

Projection Bias: we tend to assume that most people think just like us. Well, they don't. That's why you are not an ideal persona to test for. We assume we're the most normal and typical. False consensus. Using "we", "users in general", etc., when there is no calling for it.

The Current Moment Bias: in general, we prefer healthy food, but now we want chocolate.

Anchoring Effect: we notice the difference in value, but not the value itself. How many times have you heard "this solution is better (faster, more intuitive, easier to learn, looks better, etc.) rather than "do we even need this"? The research found that ignoring part of the information (with a decision), rather than weighing all the options, can actually lead to more accurate decisions.

Apophenia: the experience of seeing patterns or connections in random or meaningless data.

The role of Heuristic Evaluation is to deal with these biases.

Buttons

Despite of the physical world origin, buttons have survived the general victory over skeuomorphism. They are still there, maybe less physical in appearance. Their design and placement should take into consideration its nature. For example:

Call-to-action (CTA) buttons. The main point is that CTA buttons most often invoke server actions. Some of the actions can cause an irreversible action. Then a prompt "Are you sure.." is in order. Default or affirmative button (normally "OK", "Submit" etc.) should stand out.

Toggle buttons don't work well in groups (i.e. toolbars).

Positioning

In a Form

The obvious answer is "C". "D" and "E" is the second place user would look for a button. "A" and "B" is the last. Study shows that all versions work except for "E".


Spelling out the action. Very often a simple "OK" is not enough. Keep with one of the Jacob Nielsen's top heuristic principles: the user should not have to remember information from one part to another. Label buttons with what they do.

Software as "Canned Intelligence"
Based on a formal definition of the Good Old-Fashioned Artificial Intelligence, we are not there yet. From the other point, software is nothing but a little piece of AI. Let's call it "canned intelligence" (CI). So in reality it's not so much of human-computer interaction (the computer is a simple number crunching monster), but human-humans interaction via this "canned intelligence".

Practically, no matter what your product is designed to do, it's been done before. The goal is to do it better, i.e. faster, more accurate, more intuitive. If you can clearly demonstrate it, users will flock to your tray.

Believe it or not, this UI was used to dispatch ambulances once. How many lives were lost just because of it? It's a radical example. Most of the time bad UX just wastes a lot of users' time. Multiply on number of users and you'll end up with many lifetimes wasted.
Colors

A bit of color theory.
Few interesting facts about colors.

Blue Myth
Only two percent of all retinal cones are blue-sensitive cones and the eye brings blue into focus in front of rather than on the retina, visual acuity for the blue range of the spectrum is poor and it decreases with age. User performance in symbol identification is poorer with blue symbols than with symbols of any other color.

Where to use color-coding:

Using more than 6 colors is not recommended. Color-coding must be consistent throughout the entire UI.

Colors and words have a lot in common. We all learn how to use words at an early age but unfortunately, few learn how to use color effectively. Unless you spend many hours mixing paints and trying out their various effects and nuances, speaking with colors can be like talking in a foreign language.

Most people don't learn the second language. In their color preferences, few ever go beyond primary colors. The following is based on US survey, made by artists Komar and Melamid in 1995.

1st favorite color   2nd favorite color  
Blue
Green
Red
Black
Purple/Violet
Brown
Pink/rose
Beige/Tan
White
Grey
Yellow
Mauve
Fuchsia
Maroon
44%
12%
11%
4%
4%
3%
3%
2%
2%
2%
2%
2%
2%
2%
Blue
Green
Red
Black
Purple/Violet
Brown
Pink/rose
Beige/Tan
White
Grey
Yellow
Mauve
19%
17%
16%
7%
5%
4%
6%
3%
4%
3%
3%
2%

Colors only work in combinations.

Inside (smaller) squares have the same color

"A" and "B" squares are exactly the same


Our mood plays very important role too. Walk in a garden and look around you. Nature doesn't make mistakes with color. No matter how vivid or subtle, they always seem to work together. Why? Because the garden is pleasant..

Komar and Melamed didn't stop with colors. They have sent a long list of questions around the world, then "painted by numbers" the result.

USA Most Liked USA Least Liked

Here are some of the questions:

Do you prefer seeing bold, stark designs or more playful, whimsical designs? bold, stark: 39% playful, whimsical 49%  
Do you tend to favor paintings with sharp angles or ones with soft curves? sharp angles 22% soft curves 66%  
Which patterns do you like better: geometric patterns or more random uneven patterns? geometric 30% random 62%  
Do you like to see colors blend into each other or do you like it when different colors are kept apart? blended 68% separate 18%  
In general, which would you say that you prefer? When the artist uses more vibrant shades, paler shades, or darker shades of color? vibrant 36% paler 32% darker 22%
 
Complex features

"Things should be made as simple as possible, but not any simpler." - Albert Einstein

When adding new features, keep in mind that 80% of users use only 20% of software features.

Kano customer satisfaction questions:

Accessibility Compliance and ADA
"If you don't know the way,
be guided by principles."

People have disabilities. You have to be aware of them. In the case of the UI design, it's mostly visual disabilities: contrast and color blindness. There are other things like support for the tabbed navigation, alt text for every image, etc.

Hopefully, today some UI design apps like Sketch have tools for that, so you can check you text contrast and see how people with different types of color blindness will see your stuff.


From ADA Compliance Rules

US Gov. Section 508 and User Agent Accessibility Guidelines (UAAG).
Confirmation and Progress Indicators
Always provide means of confirming user action.

Temporary vs. permanent status display. If your work doesn't require display of status, remove status update message after 2-3 seconds.

Response Times and Progress Indicators

0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. No progress indicator is needed.

1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data. So, having a spinning wheel is recommended.

10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect. For all cases over 1.0 sec. a real progress indicator (bar) is recommended. Progress bar shows either %% of in the form of "XX of XXX is ..."

[Miller 1968; Card et al. 1991]
The Power of Convention

"To establish yourself in the world a person must do all they can to appear already established." - La Rochefoucauld

We're the creatures of conventions (see the bit about the Behavioral Psych). In UI design they are our most powerful allies, saving us from the necessity to explain everything.

For example:

Copy box

Use when you wish to present information that the user needs to copy (and later paste into another application). Designate data to be copied in different font. Use block tag.

Customization

Role-based customization is provided by the system, based on user login.

User customization gives user further ability to customize:

Some app developers go beyond that and provide:

Dockable panels
Common in the desktop applications (browsers don't support docking), dockable panels allow user to arrange items on the screen to his liking and for maximum screen real estate utilization. Unlike collapsible panels, docking doesn't remove panels from the view.

Docking Control Less frequently used panels can be minimized and docked to the side


What to dock/undock: In rare cases (like, say, creating a painting app) developers allow user to customize everything:

Dashboard
We're accustomed to dashboards around us, so is a good way to use it as a starting point for command and control. Especially useful for the software with limited and repetitive tasks. Before start, let's figure out:

What to display:

User behavior:

Dashboard Design:

Sometime having a lot of negative data on one screen can lead to dire consequences. (I designed this Raspberry Pi-based executive dashboard in 01/2019. The mass layoff followed shortly.)

Default Values. What are they for?
Think carefully about the default state of any feature. It can be a great time saver or the most daunting thing to overcome. If not sure, conduct the user testing.

Dieter Rams Ten principles for good design




Good design is innovative. The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Good design makes a product useful. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.

Good design is aesthetic. The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

Good design makes a product understandable. It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.

Good design is unobtrusive. Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.

Good design is honest. It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

Good design is long-lasting. It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.


Good design is thorough, down to the last detail. Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.

Good design is environmentally-friendly. Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.

Good design is as little design as possible. Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

Dockable Panels & Menus


Error Messages
It's not useful, when an error message simply says something is wrong, without explaining why and how the user can fix the problem. Such messages leave users stranded.

Error message guidelines:
Explicit indication that something has gone wrong. The very worst error messages are those that don't exist. When users make mistakes and get no feedback, they're completely lost. For example, email offers several situations where explicit indication would be useful. Such as: when you send a message that gets eaten by the system and never reaches the recipient.

Another good example? When you state in an email that you'll include an attachment, but forget to do so.

Finally a job for that annoying paper clip: "You seem to want to attach a file to this message, but you have not done so. Would you like to attach one now?"

Don't have user to guess what error had he made, especially in the form filling UI. It's a good practice to specify the total number of errors and highlight (usually with red) all mistakes or omissions.
Accordions are different from simply collapsible panels


Explicit vs. Implied Actions
Scenario: user has to move an item from box 1 (menu, list, etc.) to box 2.

Explicit:

  1. Select item to move
  2. Select "move"
  3. Select move to from the opened directory
  4. Click to act
Implied: drag and drop item from one area to another.

Which one to use depends on:



Feedback


Nothing works without feedback, even the government.

  • Show users the system's current state.
  • Tell users how their commands have been interpreted.
  • Tell users what's happening. A background process should never display a dialog or window in which the user is required to change settings or supply information. If a background process must communicate with the user, it should start or bring forward the foreground app. This is important because the user may not know (or remember) that a background process is running and receiving communication from it would be confusing.
  • When used sparingly, animation is one of the best ways to show a user that a requested action is being carried out.

Collect as much feedback as possible. You'll sort it out later.

Filtering
Typical data grid filtering: Display only filter values that apply to the available inventory.
Logic Flows
There is neither standard for logic flows, nor a single file format. Flow design apps are endless. So it usually ends up being passed around as a PDF or bitmap. If you app can produce an HTML you can share with others, you're one step up. if it's even interactive, you're a guru.

This is unfortunate, especially because there is an industry standard for it - BPMN (business process management notation). And it's more than just a library of logic elements: icons, objects, connectors, gates, etc. It supports a fully grown industry of Business Process Management applications. If you and your colleagues master it, it'll become a huge time-saver and headache killer.

BPMN flow
  1. Define swimlines. For any web app, it's user(s), front-end, back-end.
  2. Make sure the app you're using to create it has entire library of BPMN symbols. I had to create one for Axure myself.
  3. Using correct components will save you troubles designating different things like pages, gates, users, DBs, etc.
  4. Try to use apps that allow online commenting. See prototypers section.
Forms
Form or Wizard
Wizards are good in the following scenarios:

Forms are good in the following scenarios:

Good form design source.

+ -
Form elements positioning.

Some eye tracking experiments were performed to determine the best label/data alignment, position and emphasis.


Test A: Left-Aligned Labels to the Left of Input Fields Test B: Right-Aligned Labels to the Left of Input Fields
Test C: Left-Aligned Labels Above Input Fields Test D: Bold Labels Above Input Fields

The winners are B & D. Still most of the time labels are placed on the left, because it conserve the vertical space.

To conserve horizontal space, people often use multi-column forms. This adds nothing to data legibility or speed.

Autocomplete
Icons

"A sign is something which is itself sensed and which indicates to the mind something beyond the sign itself. To speak is to give a sign by means of an articulate utterance." (St Augustine)

All signs can be grouped into 3 categories:

Index Related to its object by a direct physical connection
Icon Related to its object by likeness
Symbol Relates to its object by convention only

Symbolic signs, by their very nature, will continue to be the most sophisticated method of interacting with computers, at least until our descendants, or another semiotic entity, evolves the next step in the saga of semiosis.

In designing icons consider (in order of importance):

*  "It turns out that users select the undo function from a menu 80% of the time, as the undo "icon" does not adequately convey the idea of undoing." (Dave Kansas "The Icon Crisis: Tiny Pictures Cause Confusion", The Wall Street Journal.)

Alarms & Notifications
Unlike notifications, alarms are system feature. Color coding and shape variance help to classify them by severity. Use notifications for status change.

Avoid exposing system' own dirty laundry, offering features that reflect the system's internal view of the data rather than users' understanding of the problem space.

Tool tips
Tool tip latency is a browser function. If you want to change this, it can be done for example with jQuery tool tip
Tool tips and popovers are not the same things, but they look very much alike.
Tool tips only assigned to "tools: buttons, menu items. They refer to "how" the tool work.
Popover displays an additional info when needed.
A super tool tip is a hybrid of both. It can support multiple text and image regions.
Why optics are important in any UI work
For example, when aligning text block with a different background, consider the density of the background:

optics

For more read this.
Steps of the Process
“The human being striving for rationality and restricted within the limits of his knowledge has developed some working procedures that partially overcome these difficulties. These procedures consist in assuming that he can isolate from the rest of the world a closed system containing a limited number of variables and a limited range of consequences.” (Herbert Simon)

Steps of the Process and how they were applied to this site
Gather information, prepare for the first encounter with the customer. Listen, watch, observe, absorb, digest, take notes.
Figure out:
Main design and interaction challenges. Single page gallery design for instant access to every project or sample.
Target user. Art directors, hiring managers, corporate HR, staffers, recruiters.
What's the nature of the product (web site, RIA, desktop app, mobile app, other) A web gallery/portfolio site.
Is it:  
  A new product In a certain way.
  Product improvement Yes, over the old, all flash-based site.
  Legacy conversion No.
Other potential users and uses. Potential customers for freelance work, also serves as my archive for many design projects, sites, that are not live anymore.
What's the ultimate mission? Attract new customers, find new projects, get hired.
Were any usability studies conducted? Yes. Found thousands portfolio sites created with the same recycled WordPress themes, nothing more than glamorous slide shows. This poorly represents their authors' ability for creative thinking and web tools mastery.
Time frame, best technology. ASAP. HTML5/CSS3/customized "isotope" JS for navigation. Incompatibility with some older browsers can be sacrificed for flexibility and responsiveness. The site can be comfortably viewed on any size device without use of media queries.


Identify the problem:  
Brainstorm with other UX team members. Share your insights, observations. It's just me.
Identify all stakeholders, other team members to participate in early stage: visual designers, technical writers, marketing managers, technical managers, UX researchers.  
Schedule additional follow-up meeting(s) with the customer if necessary.  
Prepare agenda. Always distribute agenda well before the meeting, ask all participants to prepare their answers in advance.  
Figure out whether an interactive prototype is desired or in the budget.
Figure out whether additional usability research is required. During interviews I've gathered that some folks have problem navigating to the actual project or client. Changes were made.

Create Design Brief to cover:
Target user (end user or purchasing party), how computer (web, mobile, etc.) savvy are they. Site requires no specific knowledge or experience.
How can user experience be improved in the given area.  
How to make users more confident, satisfied, pleased.  
How to build loyalty (and revenue).  
WHO ELSE: best practices; how successful, popular, intuitive are they.  
WHY: our strategic business goal. Identify "success", time and money to be spent The goal is not to answer any questions, sell any goods or let user to achieve anything. Its single purpose is to demonstrate past experience, out-of-the-box thinking, mastery of media and technology.
WHEN: priorities, milestones, schedule major steps of the project.  
WHERE and WHO is doing WHAT. Site consists of 3 templates: thumbnail gallery zoomable to full size view, project detail (a slide show, HTML or flash animation), misc. content pages. There would be no "home" page.
EXPLORE and COMPARE existing technologies for compatibility, capability, popularity, ability to be completed by existing developers. It's very important to identify any potential technical issues early in the project to avoid them. Choose wire framing and design platform for best compatibility and clarity.  
LOOK-AND-FEEL: Include marketing input and branding requirements.  
  • Completely new
  • Follow the existing guidelines
  • Follow the leader, success story
  • Identify unsuccessful UIs (see WHO ELSE)
  • How many versions to present to the customer
 
If you practice AGILE DEVELOPMENT, what parts of the project can be designed and developed in parallel with UX without major disruption and fallback.  
When building personas consider: demographics, motivation, intentions, goals, behaviors. A. Recruiter - knows and understand nothing. A simple intermediary.
  B. Staffing Manager (boss of A) - has basic understanding and, most important, acquaintance with the Hiring Manager.
  C. Hiring Manager - knows what is required; if at the same time is a design or UX director, can assess your work and experience.
Present your Design Brief, take notes, edit, re-edit, present again. Unfortunately, these steps are frequently reduced to a simple statement of goals. A small mistake or omission at this stage can grow into a big problem later in the process.

Storyboarding, Mapping, Charting and Wireframing
Create well commented detailed site maps and flow diagrams. Review ones received from the client, if applicable. Try to reduce complexity of site maps by breaking them into few smaller ones.

Wireframes have to show:
  • Relative placement of functions, buttons, content, icons, pages
  • Relative importance of elements and Information Hierarchy
  • Content samples have to be as close to the real thing as possible
When choosing wireframe tools, most important thing is how fast can you sketch in it vs. paper and pencil, then compatibility with other team members, and only then its ability to output in various formats. Paper storyboards are still the fastest. Quantity is more important at this point that quality.
Don't show HI-FIs instead of wireframes unless they are pixel-accurate representations of the approved look-and-feel. Eliminate "is this the color we use?" questions during conceptual phase.
Identify and Widgetize more frequently used UI elements. If using one of the well developed AJAX libraries like Bootstrap, Dojo, Mobile JQuery, Sencha or else, see how long would it take to re-skin it vs. creating new CSSs.
Move to digital mock-ups and interactive prototypes when ready and if it's necessary.

Visual Design
Most of the UI visual design can be done in parallel with wireframing (especially when designing with an existing look-and-feel). Provide visual designers with as much and as current information as possible.
Never leave developers to guess anything, produce HI-FIs for all key screens.

Usability Testing
Testing is very important! Read more in the Testing section.

Moving into Production
You're ready to move into production if:
  • Have designed enough screens to establish an overall design language that can be applied to most any other pages that might come later (see Site map)
  • Design specs are clear enough to be easily translated to CSS styles (in case of RIA) or other global styling?
  • Have all engineering notes or key interaction functions clearly shown in the flows and wireframes. Is there a need for additional interactive prototyping to clarify any issues to developers?
  • All necessary usability tests have been completed and data gathered implemented into the design.
Don't wait till the end of development. Establish frequency of the QA monitoring.

Evaluate the Result
Evaluate all successes and failures:
  • How well the design specs and design brief were fulfilled
  • Collect metrics for the final application strengths & weaknesses.
  • Use Google analytics or other powerful site performance monitoring tools
  • Collect Feedback surveys
  • Use deeper CMS's own analytics if applicable
  • Strengths and weaknesses of the process and how well it worked for all key players
  • Gather recommendations and improvements for the product next release.
Prompts
Use "Are you sure you want to clear all data?" prompt for Reset, for it destroys all work in a single click.
Response Times for Progress Indicators

[Miller 1968; Card et al. 1991]
Personas & Roles
Personas
A persona is a narrative that describes the person your product will be used by. It can be a valuable tool, one where the act of creating it has as much value as the artifact you will creating.

A good persona will include information like:

  • behavior patterns
  • goals
  • needs
  • attitudes
  • beliefs
  • workflow
  • skills
  • environment

Each persona should have three or four important needs or goals. Choosing the right needs is an important design decision. They're closely related to the value proposition for your company, and ideally form the rational basis of your product development. Most persona needs should focus on what the person could get out of using a well-designed product or service. Personas:

Personas won't:

Roles
Roles are assigned to the system users by their superiors or system administrators. All roles are pre-defined and kept in Horizon DB. Roles define:

Admin access is required for creation/editing or deletion of roles.
Popups
Also frequently called "dialogs", "notifications", "secondary lists", etc.

Popups obstruct smooth UI interaction flow. If possible, they can be replaced with some alternatives like edit in place feature, anchored overlays, etc. The cases when a popup box is preferable to some other, less disruptive form of notification, are

Positioning
Progressive vs. Staged Disclosure
Encourage your users to discover functionality by providing cues about how to use user interface elements.
Defer advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.
To maximize the perceived affordance of "clickability", color and underline the link text, make buttons look like buttons. Users shouldn't have to guess or scrub the page to find out where they can click. If an element is clickable, for example, it must appear that way, or a user may never try clicking it. In touch screens, where is no hover highlight affordance, this is even more important. How new users understand what to do?

Four principles for screen interfaces:

Staged disclosure (wizards) is useful when you can divide a task into distinct steps that have little interaction. It is problematic, when the steps are interdependent and users must alternate between them.
  Progressive Disclosure Staged Disclosure (wizards)
Initial display Core features Features that users access first in the task sequence
Subsequent display(s) Secondary features Features that users access later in the task, even if these features are equally important (or more important)
Do users access subsequent displays? Usually not — most users get what they need on the initial display Yes — unless users stop the task before completing the sequence
Navigation between displays Hierarchical: users start at the initial display and, if necessary, move to the secondary display and then (often) return to the initial display Linear: users progress through the task one step at a time
Main usability benefit Learnability: novice users are focused on the most useful features and confusingly advanced features are hidden Simplicity: each step is simple and its purpose is clear because features that belong to other steps are hidden

Ensure that links and category descriptions explicitly describe what users will find at the destination.

Perceived affordances are actions you understand just by looking at the object, before you start using it. Common symptoms of the lack of perceived affordances are:

Rapid Prototyping
If picture is worth 1000 words, a fully interactive prototype is worth 1000 PowerPoint presentations. if you have time and inclination to do it.

What to prototype?

One can prototype a whole app, a section of it or just a single (usually most debatable) feature. The first situation is rare, - most people have a good idea what are they doing. For the last one you'll need a most versatile prototyper.

What to prototype with?

There is no shortage of interactive prototyping applications, ranging from free to hundreds of dollars. Most of them are simple click-through ones (in that there are no different than, say, PowerPoint). Sketch+Zeplin support this kind of interactivity today, so you don't have to invest into anything less powerful.

Three programs stand out of the crowd: Axure , Justinmind and Hype . Axure is the most powerful one when it comes to design complex interactions with datasets and global variables. Hype is a simplified HTML5 version of Flash. It's a timeline-based program, best suited for tutorials. It can do more if you can write Javascript like a pro.

Pros: Cons:

The future

The more successful your prototyping is, the more chance you'll be asked whether "developers can re-use it". Then you'll have to lower your eyes down and, in sotto voce, say "not really". Aside from Framer most prototypers produce "spaghetti code". And mastering Framer Studio is almost as easy as JavaScript itself. Besides, you've already invested your time into learning too many programs.

If you're a master of Sketch and Zeplin, and a click-through screen flow is enough, don't look any further. In fact, there is a chance we all won't need to look any further with the new Sketch2React app. It produces clean, almost hand-tooled HTML code with external CSSs and JSs. Your wait is over if you don't mind the tedious task of naming all your Sketch layers properly. It's beta, but a very promising one. Right now it generate HTML with Bootstrap and JQuery dependencies only, but in the future it will be full React.
Scroll or Click
Keep in mind that on Google search results page, only 6% of all users advance to the second page.
Scrolling is easier than clicking.
Indicate that there is more content with pagination, dot navigation, numbers, etc.
Tabs
Testing
Test as often and as early as possible. To start testing in the development cycle is the most expensive way. Use prototyping as much as you can.

Keep in mind:

"It takes only 5 users to uncover 80% of high-level usability problems."
Jakob Nielsen

When testing, consider:

DO NOT:

Invite people to simply criticize you app or its individual features. They'll do. You can bet your bottom dollar on it. So, avoid questions like:

INSTEAD:

Prepare testing forms, schedule testing session as precise as a rocket launch. For example, this one was made by UserFocus in 2009.
Touch Screen
Apple recommends a minimum target size of 44 x 44 pixels. Since physical pixel size can vary by screen density, Apple's pixel specifications apply best to the iPhone's 320 by 480 pixel, 3.5 inch display (164ppi). Since the release of the iPhone 4's Retina Display (326ppi) Apple has updated these specs to points instead of pixels. Microsoft suggests: a recommended touch target size of 9mm/34px; a minimum touch target size of 7mm/26px; a minimum spacing between elements of 2mm/8px; and the visual size of a UI control to be 60-100% of the touch target size.

Gap between touch elements

1 mm gaps for index finger usage 2 mm gaps for thumb usage

An MIT Touch Lab study of Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF) found that the average human finger pad is 10-14mm and the average fingertip is 8-10mm.

Touch screen navigation
Swipe navigation can be used for:
Pros: Cons:
One finger operations< Poses significant muscular strain compared to finger tap.
Allow partial view of data on both screens (before and after) Hard to use with longer lists
Replaces pagination. No hover actions

Multi-finger operation - zoom in/out with 2 fingers.
Single tap - select.
Double tap - open detailed view
Customizable Toolboxes
Tool bar customization is a must have feature. This is not your garage, keep the screen toolbox lean.

The easiest way is to allow user to drag and drop tools onto the tool bar/row:


© Bohemian Coding Sketch


In a more involved UI, where are hundreds of possible functions, a more sophisticated customization is used:

© Maxon
Type on low-resolution Screen
To serif or not to serif

In your lifetime you've seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read. Chiseled by Romans, letters used to have "serifs" - those specific notches were nothing but the result of chisel cuts in stone. Alas they became de facto standard in text readability for next twenty centuries. Serifs create an imaginary baseline. The first sans-serif typeface was designed in 1812 by William Caslon IV.

Text on the 72-96 ppi screen doesn't have enough resolution to even represent those serifs. On the left is 10 px type.

Text highlighting

Underlined text. It came from the world of typewriters as the only means of highlighting part of the text. Regrettably it found its way into web, mostly as link indicator. If you can avoid it, do it. There are other, more elegant ways.

Bold. The most natural way of emphasizing parts of text. Avoid artificial boldfacing using HTML(<strong> tag). Instead use bolder versions of the same typeface, web fonts usually come with.

Times Regular Times Bold Times Regular with <strong> tag


Against Italic
What looks OK in print, could be a problem in low res.

On the left you can see why only 0°, 45°, 90° lines are looking crisp without antialiasing. So there is no point to italicize text without antialiasing it.

Antialiasing would add extra blur to your text. When all screens become "retina"-type, we would be able to forget about this.



Colorize It
Color is the only way to highlight the part without altering the typeface. Narrow your text colors to 3 colors maximum. The perception that black text on white background is the easiest and fastest to read is a myth. You can read this page as fast as any other web page.
Hating Helvetica
People outside the world of graphic design sometimes develop strange and unexplained attitude toward certain typefaces. Opinions like "ugly", "old tired" or "boring" font are common. Originally designed for Deutsche Bundespost, Helvetica is the typeface now used on IRS forms. Despite of the fact that Helvetica is one of the best and most readable in small sizes sans-serif fonts, what matters is that you've seen that typeface before, and not under the most pleasant circumstances.
3 Classes of Users
Visceral User.
This is rather window shopper. Although he may not yet know what to ask about, often he is the one you most likely have to sell your product to.

Things, he notices and likes:

  • UI elegance, general look-and-feel
  • Price
  • Speed
  • Manufacturer's reputation
  • Installed base

He doesn't care:

  • Navigation shortcuts
  • Useful UI redundancies
  • Accuracy (if applicable)
  • Power features, hidden behind the slick UI

New User. He has started, but still uses manual and help quite often. A landing "how to" screen is for him. A checkbox "don't show this screen on start" is always a good idea.

He likes:

  • Accessibility of Help, Tool Tips, "How to" lessons, tutorials
  • Compatibility with other software. Import/export options
  • Conventionality of UI. Any deviation from an industry convention causes lot of anxiety.

He doesn't have time to notice:

  • Navigation shortcuts
  • Useful UI redundancies
  • Accuracy (if applicable)
  • Power features, hidden behind the slick UI.

Power user. Works often, works long hours, used product for a long time.

He does like:

  • App true power
  • Manufacturer's commitment to improvement
  • Frequency of updates (if free or low cost)
  • Active users groups and on-line communities.

He doesn't like:

  • Changes in UI drive him nuts
  • Functionality removed or disabled
  • Conventionality of UI features.

Layout of Things
"Rivers of White"
Leave plenty of white space around type and graphic elements (an eighth to a quarter inch depending on size relative to the layout).

Leave a little more white space at the bottom of a page relative to the top of the page (e.g., 0.75 inch at the top and 1 inch at the bottom). This will optically balance the page so it won't look like it is slipping off at the bottom.

Create a wide margin to direct the reader's attention into the copy or image area.

Use at least a quarter-inch gutter between columns.

Use left aligned (unjustified) text to create visual relief. Be careful that the "rag" indents on the right are not too big.

Increase leading (white space between lines) to lighten the look of the page.

Invite the reader into the page by leaving open space at the top and along the left margin.

Pixels are not dollars, don't sacrifice the breathing space.

Tools of the Trade
Coming soon..
Wireframes
There is no established standard for wireframe format. Most often, their style is defined by the program used.

Sketchiness
Balsamiq and OmniGraffle once were the main wireframing tools. Some people use PowerPoint, Adobe Illustrator, Fireworks, InDesign or paper. UX is a truly app agnostic field.

Personally, I find nothing valuable in pursuing that "hand-drawn on whiteboard" look that attract so many people to Balsamiq, but since the most important things are:
I recommend to use whatever software your teammates are most comfortable with. Especially, since those programs are cheap and easy to learn.

Accuracy
Wireframes evolve through the process of application design from very schematic to detailed, "HIFI" ones. There is no standard for them.

Static vs. Interactive wires
Rapid prototyping using tools like Axure, Justinmind and Tumult Hype are changing the game. Check out the Prototyping section.