-
Guiding Principles
-
Don't make me think
- What does it mean?
-
Forced to think
- Name used
- Not-so-obvious buttons and links
-
Why
- Very little time to browse the site
-
How to use Web
-
Scanning
- Very little time
-
Why
- Complete a task as soon as possible
- Find content of interest and relevance to the task at hand
- Basic Human Skills
-
Attention
- Related to the task at hand
- Trigger wording
- Free
- Great Reductions
- Beauty
- Our Name
-
Satisfaction is enough
- Do not make the best choice, satisfaction is enough
- Why
- Busy
- Wrong guesses have no serious consequences
- Tap the Return button
- Weighing options does not improve our chances
- Opportunity Factors
-
The 101 Rule
-
Use of customary usage
-
What content is on the page and where
- Logo
- Top left corner
-
How the service works
- Cart Shopping Cart
-
Appearance of visual elements
- Sharing methods of social networking
- Simplicity is better than consistency
-
Clear visual hierarchy
-
Highlighting the important
- Bold, large font, more white space
- Similar content grouping
- Logic includes partial visual nesting
-
Divide the page into clearly defined areas
- Users quickly decide on the area of interest
- Clearly marked clickable places
-
Reduces visual noise
- Dazzling
- Improper organization
- Too dense
-
Set text formatting
-
Correct title format
- Clear and unlikely to confuse visual distinction between different level headings
- The title is closer to the related content
- Short paragraphs
-
List of symbols used
- Bullets
- Leave a little extra white space for different items
- Highlight key words
-
Krug's Second Law of Usability
- It doesn't matter how many times you click, as long as each click is a clear and unmistakable choice that requires no thought
-
A choice without thinking
-
Provide guidance when making difficult choices
- Short
- In time
- Will not miss
-
Krug's Third Law of Usability
- LESS text
-
Eradicate
- Welcome Message
- Instruction text
-
Navigation
-
Web navigation 101 rule
- To find a certain target
- Decide whether to ask or browse first
- Process
-
Lasting Navigation
-
Element
-
Home
- Top left corner
- Unique fonts, recognizable graphics, unequal sizes
- Section
-
Utility
- Registration, login, help....
- Return to home button/link
-
Interference
-
Form
- When paying
- Registration
- Fill in the feedback
- Checking personal preferences
- Provide search
-
Page Name
- Each page needs a name
- Location should be suitable
- eye-catching
- The name is the same as the link clicked
-
Indicator
- Obviously
-
Breadcrumbs
- Put it at the top
- Use the ">" spacing hierarchy
- Bold the last element
-
Tags
- Activated labels with different colors or shapes for contrast
- Physically linked to the space beneath it
-
Smooth start
-
First time on a new website
- What kind of website is this?
- What's on the website?
- What can I do here?
- Why should I be here and not somewhere else?
-
How the home page communicates
- Slogan (Tagline)
-
Welcome ad
- Brief description of the website
-
Consider
- Clear and to the point
- Suitable length
- 6-8 words
- Describe website features and obvious benefits
- Don't be too general
- Have personality, vividness, or playfulness
- Learn more
-
Usability Testing
-
Time
- Once a month
-
When
- Ongoing, throughout the development process
-
Quantity
- 3 people
-
Recruiting
- User Groups
- Exhibition
- Social Networking Sites
- Customer Discussion Group
- Website pop-ups
-
What
- Perform several key tasks
-
Preparing for test tasks
- Event List
-
Typical 1h test
-
Welcome section
-
4m
- - Introduction to how to participate in testing
-
Question section
-
2m
- - User background issues
-
Home page "Sightseeing"
- 3m
-
Task Testing
- 35m
-
Problem Exploration
- 5m
-
Closing section
- 5m
-
Decide which issues to fix
- Collect a list of questions
- Select the 10 most serious problems
- Question Rating
- Resume a sorted list
- The most serious problems are fixed first
-
Accessibility (Accessibility)
-
HTML
- Add the appropriate alt text for each image
- Use the right title
- Forms to work with screen readers
- Add a "Jump to main content" link at the top of each page
- Make all content accessible from the keyboard
- Set sharp contrast between text and background
- Use a template with good accessibility
-
Tips
- Do not use small, low contrast fonts
-
Don't put tags in form fields
-
unless
- The form is super simple
- Start typing when the label disappears, clear the content label back
- Retain the difference between visited and unvisited links
- Don't let headings float between paragraphs
- By Steve Krug