Interaction Design

Responsive Layout

Novice

Some responsiveness is shown, but for only 1 or 2 screens of the design. The layout patterns may be unconventional or impractical for a responsive design.

Competent

Responsiveness is demonstrated and considered throughout the design. Attention has been paid to common responsive patterns for content and navigation.

Proficient

Sizing and interface density is considered and appropriate across target devices. Feasibility of implementation has been considered or reviewed with a developer.

Expert

The responsive design is sufficiently mocked up and documented so that a developer would be able to use what’s provided to start building the website/product.

Macro-interactions

Novice

Screen to screen interactions are overly complex or require too many steps.

Competent

Screen to screen interactions proceed in a logical flow which has been minimized without impeding functionality.

Proficient

Interactions offer “sane defaults” to reduce friction, and empty states and other edge cases have been considered.

Expert

Multiple interaction patterns and models have been considered and tested, with clear supporting evidence for the model chosen being connected to users' mental models of the product and tasks.

Android Navigation

Novice

Navigation is inconsistent, or organized unconventionally according to Material design guidelines for Android.

Competent

Navigation is well-structured/organized and follows conventions appropriate to Android and the product.

Proficient

Navigational hierarchy has been considered and designed to match intended users' mental models of product and information.

Expert

Multiple navigation models have been considered and tested, with clear evidence for how the chosen model matches up with user expectations and mental models.

Forms

Novice

Form elements follow few or no best practices.

Competent

Form elements follow best practices: clear labels, appropriate hints to the user, appropriate controls for different user inputs.

Proficient

Forms follow conventions and best practices, and have also been refined to match the users' mental models, as well as reduced where possible to cut down on fatigue.

Expert

Multiple approaches to the forms in the product have been tried and tested, with clear evidence for how the proposed forms are efficient, and match the users' needs, expectations, and mental models.

Interaction Animations

Novice

At least one animation is shown, but the animation is not very thoughtfully incorporated into the design, or could be executed better.

Competent

A few key animations have been considered, and are applied thoughtfully to support user understanding. They may need some improvement in terms of implementation.

Proficient

Animation are well-considered and subtly integrated throughout. Animation adds to the product rather than distracts. Prototypes demonstrating the animations are well-executed and convincing (without errors).

Expert

Animations have been tested and iterated upon. Animations align with users' mental model and also support the brand look and feel. When appropriate, sound effects have been considered which further enhance the experience.

Interface controls

Novice

Controls are used incorrectly or could be exchanged for something more appropriate / simpler /  more elegant.

Competent

Interface controls are used appropriately to their purpose—buttons, navigation elements, form controls, links, cards, etc.

Proficient

Controls leave no doubts about appropriateness and/or it’s clear that multiple options were explored to determine the most effective controls.

Expert

Combo or less conventional interface controls have been tried and tested, with clear user-centered reasons for the chosen controls.

Interface layout

Novice

Interface elements are sometimes in unexpected places or the layout is too squished or too spread out for comfort.

Competent

Interface is laid out following conventions to enhance usability and has an appropriate density for the medium and content.

Proficient

Interface layout is flawless—no doubts about what does what, or where to look for certain actions. Alignment is carefully considered throughout.

Expert

Interface is designed with full flexibility in mind, and is not designed to be a “fixed size” layout. How the layout adapts to different amounts of content has been considered throughout.

iOS Navigation

Novice

Navigation is inconsistent, or organized unconventionally according to iOS guidelines.

Competent

Navigation is well-structured/organized and follows conventions appropriate to iOS and the product.

Proficient

Navigational hierarchy has been considered and designed to match intended users' mental models of product and information.

Expert

Multiple navigation models have been considered and tested, with clear evidence for how the chosen model matches up with user expectations and mental models.

Micro-interactions

Novice

Micro-interactions have been considered in a couple of places.

Competent

Micro-interactions are considered throughout the product.

Proficient

Micro-interactions are thoughtfully considered, showing that multiple options were explored to determine the most effective approach.

Expert

Micro-interactions are integrated subtly throughout the design, with careful attention to when and how animation will be used to support the user’s understanding of what is going on.

Navigation

Novice

Navigation is inconsistent, or organized unconventionally.

Competent

Navigation is well-structured/organized and follows conventions appropriate to the platform and product.

Proficient

Navigational hierarchy has been considered and designed to match intended users' mental models of product and information.

Expert

Multiple navigation models have been considered and tested, with clear evidence for how the chosen model matches up with user expectations and mental models.