design example

User Flow of Forms

Constraints is an concept discussed in class that helps prevent a person from committing errors by limiting them what they can do with the user interface.  A great example used in class was the constraints on a form to enter the expiration date for a credit card. Good Example: Typeform Typeform applies constraints on how...

Penguins vs. Monkeys

Heuristic: Match between system and real world   Positive Example – Club Penguin (clubpenguin.com) This heuristic is especially valuable for young users who are unfamiliar with system terms and complex vocabulary. Club Penguin is a multiplayer game (MMPORG)  geared for users aged 5-10 and is designed to be an initial exposure to Internet gaming...

When To Wake Up Your Devices

Design Heuristic: Visibility of System Status Many devices that we use, such as laptops, have a “sleep” mode where the device is largely inactive but still on (and can easily be reactivated by the user). It is generally quite helpful for the user to know when their device is in this state and some...

X marks the spot

Consistency and Standards: Bad example: Within the OMNI Harvard app, exit x’s are not located in similar places. For example, to exit the food page, the X is on the left side, but to exit the dining halls page, the exit is on the right side. Although trivial, it is a needless inconsistency, and...

Guide Users to make the right choice

Design Principle: Error Prevention. Example of design that exemplifies Error Prevention: Closing a window on Mozilla Firefox. Everytime I try to close a window of Mozilla Firefox, a smaller window pops up asking me to confirm my action (basically, whether I really inteded to close my window including all the tabs). This design examplifies...

Famous Apps

Heuristic: Consistency and Standards There are many websites and apps that share a few general functions like writing a new message, checking notifications, or scrolling through a feed. With such shared functionality across so many apps consistency becomes more and more important. Good Example: Groupme The button for sending a new message is extremely...

Great Minds Drink Alike

The concept I chose to look for was Affordances–indicators of how the user is supposed to interact with the product. Starting with the bad example, which I’m sure almost all of us have struggled with at some time:  The milk dispensers in the DHall. If you’re familiar with them, it’s fine, but when first...

The Angle Issue: Direction Confusion

Good: Redundant Cues Example: Faucet Handles Redundant cues are useful to reinforce the purpose of a product in more than one way in order to satisfy the awareness of different target customers. In the faucet above, the hot and cold handles are distinguished by their pointing direction, color, and label. Their pointing direction (left...

Put Some Color on that Canvas!

Design Principle – Redundant Cues The design principle of redundant cues uses colors or shapes to represent meaning to the user or similar meaning for areas that utilize the same color or shape. An important caveat to using color is that 10% of males are colorblind so relying on color, as the only indicator...

Minimalist vs. Useful

Design Heuristic: Aesthetic and minimalist design Here we have a very sleek, minimalist design for a vizio tv: However, we spent some time last week talking about affordances and the tradeoff between minimalism and information. The violations within this design make themselves known as soon as you misplace the remote or it dies, because the minimalist...