User Interface Design
As far as the customer is concerned, the interface is the product.
User interface design focuses on how a system output and input is presented. It is related to design in general, graphic design, interaction design and ux design. There are separate notes about concrete user interface elements e.g. dropdowns and forms.
User interface design focuses on the concrete borderline between a person and a product. Defines the interface how user really interacts with the product.
Design user interface around the content. Not the other way around, like many people do on web design. User interface and the content should never compete.
UI that competes with the content: drop shadows, gradients, 3D buttons.
Strengthen the context. Always show where user is currently and what ways can he proceed.
To provide context: partial transparency, 3D effects, overlay, blur, realism.
Visual hierarchy should always follow behavioural hierarchy. More about visual hierarchy in graphic design notes.
# First two buttons can possibly affect elements marked with *.
Browser *
-> Tab *
-> Button *
-> Button *
-> Website *
-> Tab
-> Button
-> Button
-> Website
-> Tab
-> Button
-> Button
-> Website
-> Tab
-> Button
-> Button
-> Website
Presentation should be consistent with the behaviour. People can learn to predict behaviour by appearance. Similar appearance should mean similar functionality. Moving elements around is really annoying.
Checkbox that works as a link is very bad.
Checkbox should always mean toggle behaviour.
Do not change "Buy" button placement on every web page.
Appearance should improve discoverability. Visual design should show how it is possible to interact with the product. Highlight all opportunities of interaction. Make the most desired or most used actions emphasised accordingly, usually with size, position and color. Use already established standards and symbolism.
Web videos usually have play symbol in the middle to highlight that you
can start the video by clicking.
Floppy disk means saving.
Take usage context into consideration. What are the physical limitations while using the product. How is the product held and used? What is the normal environment and lightning?
Mobile application buttons for most frequently used actions should be
placed on the lower part of the screen for easy access.
Human vision is limited. We have trouble separating colors that do not have different names in our vocabulary, especially if they are not next to each other. Human vision is optimized to see structure and movement. Use structure to communicate how your interface works. Avoid unnecessary movement as it forces attention.
Red vs Bright Red
Interface should be tidy. User interface elements should be aligned neatly. Even small errors in element alignment can cause design to look unprofessional. Use good amount of whitespace, it gives eye a rest and creates groups.
// bad
__________ __________
| | |__________|
| | |__________|
|__________| __________
__________ | |
| | |__________|
|__________|
_____________________
|_____________________|
__________
| |
|__________|
// good
// Pleasing space between elements.
// Consistent height of elements.
// Make sure different columns are aligned perfectly.
// Note that each container does not need to _fill_ the whole space.
__________ __________
| | | |
|__________| | |
__________ | |
| | | |
|__________| |__________|
_______________________
| |
|_______________________|
Each interaction should produce noticeable feedback. Feedback should be immediate and it should not interrupt the user. Avoid using tone that blames users in your messages.
Form live validation is good.
Show non-blocking success messages after successful save.
Show non-blocking error message if saving failed, consider making it
blocking if error was mission critical.
Do not include a blocking "Save successful!" modal each time you send
a chat message. Make a message appear in a small notification box.
Links that scroll down and up the webpage are good only if there is
a short scrolling animation. Otherwise user might not get what is
happening.
User must feel like being in control. No one likes to use a device that dictates how you should act. Keep in mind that the interface is the slave, not the master.
Use short phrases and simple words.
- Keep it brief.
- Prefer pictures over text.
- Describe only what the user needs to know.
- Use terminology that the user will understand.
- Tone should be informal, precise and friendly, but not too familiar to become annoying.
- Do not use a period after a single sentence used in isolation.
- Prefer strong words over exclamation points.
- "Cancel" always returns to the previous state, leaving no side effects. Use "Close", "Stop" or something similar for the cases where side effects are already applied.
- More about good writing in writing notes and copywriting.
# bad
See Offers
Error: Invalid Email.
ok, okey
Device
Configure your preferences
# good
Get Lafilex Boots
You need an email should look like this: "name@email.com"
OK
Phone
Choose your theme
Hide the unnecessary. Consider only showing the most frequent actions or reveal features as the user needs or asks for them.
Before a click:
________________________
| Leave a Comment... |
|________________________|
After a click:
Name____________________X
| |
|________________________|
Email____________________
| |
|________________________|
Comment__________________
| |
|________________________|
[ Submit ]
Use the Fitt's Law The time required to execute a mouse click depends on size of the target area and distance to the target area. Thus, more frequently used actions should be closer and bigger.
Bad:
[ Submit ] [ Reset ]
Good:
__________
| |
| Submit |
|__________| [Reset]
Provide tooltips for unlabelled controls. Helpful element tooltips are always good, but avoid placing a tooltip if it is clear what the element does. Avoid tooltips that cover the main content.
User Interface Design Tools
Sketches: Rough and partial interface design overviews. Usually hand-drawn on paper.
Wireframes: Rough interface design. Should include ways to explore, navigate and interact with the content. May be on paper or digital.
Prototypes: Detailed interface design demo. Should be usable in real usability testing.