Showing posts with label interaction design. Show all posts
Showing posts with label interaction design. Show all posts

Wednesday, January 7, 2015

Day 77 - Ten Usability Heuristics for User Interface Design

Jakob Nielsen's 10 most general principles (or heuristic rules of thumb) for interaction design:
  1. Visibility of system status.
  2. Match between system and the real world.
  3. User control and freedom.
  4. Consistency and standards.
  5. Error prevention.
  6. Recognition rather than recall.
  7. Flexibility and efficiency of use.
  8. Aesthetic and minimalist design.
  9. Help users recognize, diagnose, and recover from errors.
  10. Help and documentation.

Tuesday, October 21, 2014

Day 68 - Interaction Design Tip - One Time Actions

You may need to have users perform an action one time and communicate that the action will not be performed again.  For example if the user is doing an install.
  • In this case the solution would be a button labeled "install".
  • The button can have a subtle animation when pressed.
  • Transform the button into a label specifying the result of the action, e.g. "Installing".
These steps can be generalized into other one time actions by using buttons and labels to communicate the status of the actions.

Monday, October 20, 2014

Day 67 - Interaction Design Motion - Disney Animation Principles

With mobile app platforms and emerging technologies becoming more immersive and dynamic, it's important to understand animation as a ux or interaction designer.

These are Disney's 12 Rules of Animation:
  1. Squash and stretch
  2. Anticipation
  3. Staging
  4. Straight ahead / pose-to-pose
  5. Follow through / overlapping-action
  6. Slow in and out
  7. Arcs
  8. Secondary action
  9. Timing
  10. Exaggeration
  11. Solid drawing
  12. Appeal

Monday, August 4, 2014

Day 40 - Interacton Design Techniques - Progressive Disclosure

Progressive disclosure is an interaction design technique that initially only shows users the most important actions required.

A print dialog box is a classic example of progressive disclosure. When you hit 'print' you're presented with a dialog box with a small set of choices. There's typically more print features and functionality that are initially hidden as to avoid end user confusion.

Using progressive disclosure techniques the user sees tasks unfolding via a dynamically expanding UI (e.g. a form grows with more choices).  This can help users form a correct understanding of the task.

Start by showing the UI controls for the first step of the task, and when the user's done with that step present them with the second step, and so on.   Users should have the ability to easily go back and change answers and change their mind about earlier choices.

Hiding advanced functionality early from novice users can lead to increased success of it's use later on.

While progressive disclosure techniques are applied in many products empirical research is required if you're going to employ these techniques.

Example of progressive disclosure:


Friday, August 1, 2014

Day 38 - 10 Mobile Interaction Design Tips

Taking complexity and making it easy is hard. Focus, iteration, testing, and polish is required for good app design. Keep these mobile tips in mind when designing an app.
  1. Stay focused on the goal.
  2. Start with sketching, not a computer. It's not about drawing it's about design.
  3. Match the interactions and affordances to your platform. Pay attention to developer design guides, conventions, and patterns.
  4. Less is more so keep it simple. Limit and consolidate the number of elements for a clean design.
  5. Provide the user with cues and meaningful feedback about their interaction whether the user makes mistakes or not.
  6. Create hints for users so you can lead them through a design.
  7. Build a visual and approachable hierarchy.
  8. Sliders should convey movement or progress.
  9. Remember to consider international users. Great icons don't require text. Just be careful of cultural bias.
  10. Empower your user with mobile interfaces that accommodate to their skills.  Your app should adapt with a learning process progression so that users can do things faster once they understand the basics. Let go of the hand holding and give them shortcuts so that the app alters itself to a user's comfortable experience.
Take notice of some of the best mobile interactions you've experienced as wells as the poor ones.  Think about the apps you interact with daily on your device and how you engage with them.  As a writing exercise list them out.

Sunday, June 1, 2014

Day 11 - Characteristics of Good Interaction Design

Here are a few characteristics of good interaction design:
  1. Understanding.
  2. Meaning.
  3. Value.
  4. Engagement.
  5. Responsiveness.
  6. Speed.