UI and UX and Design
List of forms and data entry usability guidelines
- Fields in data entry screens contain default values when appropriate and show the structure of the data and the field length.
- When a task involves source documents (such as a paper form), the interface is compatible with the characteristics of the source document.
- The site automatically enters field formatting data (e.g. currency symbols, commas for 1000s, trailing or leading spaces). Users do not need to enter characters like £ or %.
- Field labels on forms clearly explain what entries are desired.
- Text boxes on forms are the right length for the expected answer.
- There is a clear distinction between "required" and "optional" fields on forms.
- The same form is used for both logging in and registering (i.e. it's like Amazon).
- Forms pre-warn the user if external information is needed for completion (e.g. a passport number).
- Questions on forms are grouped logically, and each group has a heading.
- Fields on forms contain hints, examples or model answers to demonstrate the expected input.
- When field labels on forms take the form of questions, the questions are stated in clear, simple language.
- Pull-down menus, radio buttons and check boxes are used in preference to text entry fields on forms (i.e. text entry fields are not overused).
- With data entry screens, the cursor is placed where the input is needed.
- Data formats are clearly indicated for input (e.g. dates) and output (e.g. units of values).
- Users can complete simple tasks by entering just essential information (with the system supplying the non-essential information by default).
- Forms allow users to stay with a single interaction method for as long as possible (i.e. users do not need to make numerous shifts from keyboard to mouse to keyboard).
- The user can change default values in form fields.
- Text entry fields indicate the amount and the format of data that needs to be entered.
- Forms are validated before the form is submitted.
- With data entry screens, the site carries out field-level checking and form-level checking at the appropriate time.
- The site makes it easy to correct errors (e.g. when a form is incomplete, positioning the cursor at the location where correction is required).
- There is consistency between data entry and data display.
- Labels are close to the data entry fields (e.g. labels are right justified).
Simple Ideas to Make things Better
5 Things that Make Website Visitors feel Stupid (so avoid them)
Little Big Details (not updated recently but full of good ideas)
UX is Simple
If something is unclear - clarify it
If something is arduous - lighten the load
If something is complex - make it simpler
If something is over verbose - strip it back
If something is ambiguous - clarify it
If something is big - make it feel manageable
If people get lost let them find their way out
If something goes wrong - let people recover
If something seems pointless - show the value
If something is dry add some levity
If something is dreary add some delight
If something needs explaining - explain it carefully
Make the important stuff important and the other stuff less so
Less is more (but you probably knew that)
Make desired actions obvious - show the way
If something feels daunting - provide support
If something goes right - say it did
If something goes bad - say it did
If something requires effort - set expectations
If something feels risky provide reassurance
If something feels fragile make it feel solid
If somethings looks great it’ll help to make it feel great
Bring structure to the unstructured
Don’t presume anything
Don’t try to be clever
Design of Sites
- Be consistent
- Offer informative feedback
- Rely on recognition over recall
- Help customers prevent and recover from errors
- Support customer control and freedom (ex. Provide multiple ways to navigate)
- Help frequent customers use accelerators
- Strive for aesthetic and minimalist design
Customer Centered Design Myths
- Good Design is just common sense.Why are there so many bad sites? Web design teams have to remember they are not the customer. They cannot predict how customers will think or act.
- Only Experts Create Good Design.
- Web Interfaces Can be Redesigned Right before Launch.
- Good Design Takes Too Long and Costs Too Much. Customer centered design does add some up-front costs because you have to talk to customers, make prototypes, get feedback on prototypes, etc.But it reduces back-end costs - the costs incurred as a result of responding to customer dissatisfaction.Reduces total development time and costs because it focuses on finding problems in early stages of design,
- Good design is just Cool Graphics. Graphics are only on part of the larger picture of what to communicate and how.
- Web Interface Guidelines Will Guide You to Good Design. These are a good checklist but they only address how the site is implemented not what features the site should have, the organization of the site, or the flow between individual web pages.
- Customers Can Always Rely on Documentation and Help.These are important but customers are not patient enough to sift through them to find help.
- Market Research Takes Care of Understanding Customer Needs. It is helpful for understanding customer attitudes and intentions but does not explain customer behavior.What the customer does with an interface is critical.
- Quality Assurance Groups Make Sure that Web Sites Work Well. The purpose and focus of quality assurance is different from those of customer-centered design.Software testing is often technology driven, not customer driver.
- When technology becomes the central factor in web design, it becomes technology for technology's sake.
- Avoid using computer-based tools in the early design stages.Iterate more and explore the design space more broadly on paper.
- Avoid gold plating the site (making it perfect before deploying), deploy features in stages, plan for future growth.
Customer Analysis Document
- Motivation of customers to visit the site or the value proposition
- Task analysis of intended customers, describing the people, their tasks, the technologies they use, and their social and organizational issues.
- People - who are the customers? What are their interests? What are their ages? Etc.
- Tasks - What tasks do your customers do on other sites? What do they come to your current web site tot do? What specific tasks do they want to do there? Etc.
- Social issues
Business Analysis Document
- Business plan- business goals of the site and client's needs
- Competitive analysis- determines features of competition's sites and identifies features important to customers.What is the competitive advantage of the site (high level goals)
- Metrics for success- how will success be measured? Examples: attract customers, keep them coming back, conversion rate of visitors to customers
- Project Description- describes common purpose and ultimate goals for client and customer
- List of Tasks, Scenarios, Storyboards- number of tasks depends on complexity of proposed work. Label tasks as easy, moderate or difficult
Comprehensive List of Proposed Features - 'must haves', 'should haves', 'could haves'. Use competitive comparisons, surveys, market research. Each feature should have statement on how it will be evaluated or tested.
- Overall design Goals
- Metrics- measure if team reached goals and requirements. State how features will be evaluated in the final site.
Be Brief and concise, use lots of diagrams, make it interesting because these documents are often tedious to read.
- Generate and explore designs, reflect ideas on site structure and navigation.
- Generate several prototypes.
- Deliverables: site maps, storyboards, and schematics (in sets). Each set shows a design alternative addressing issues in customer analysis document, business analysis document and specifications document
- Choose one idea and develop it further. Highly detailed prototype. Refine, detail and informally test the design. Break site down into classes of pages.
- Deliverables: one site map, storyboard and schematic (in more detailed form than previous).
- Interactive prototype, written descriptions, guidelines, and specifications.
- Include as much detail as possible on layout, navigation, visuals and content for each page.
- design document -describe how site works in great detail.
- Interactive prototypes
- Technical specifications
- Design guidelines - general rules to prevent inconsistencies
- Writing style guide
- Create parts of site to create polished and fully functional site
- Determine naming conventions for files and folders
- Useful tools - revision control system, bug tracking database
- Test site rigorously
- Deliverables: completed sites, maintenance document, test plan document, updates
- Minor polishing:
- Check for spelling and grammar errors
- Verify all links
- Check for broken images
- Changing code and fixing bugs.
- Collecting usability and satisfaction metrics
- Verify all links
- Check for spelling and grammar errors
- Ensure pages follow design guidelines
- Periodically backup site
- Update FAQ
- Check team is writing for search engines
- Maintain server logs
- Periodic web site metrics (total hits, conversion rates, number paying customers, usability evaluations)
- Bug reports
- Periodic backups
Writing for Search Engines
Write distinctive page titles for every page.
Write keyword filled descriptive text neat the top of each page.Include keywords in context.
Use keyword meta tags for:
- Terms customers use most frequently
- Main site themes
- Common misspellings
Make site accessible to web crawlers (similar barriers as for site accessibility).
Use robots.txt file
Strategies to avoid:
- Repeated keywords
- Keywords that do not describe content on site
- Keywords owned by other sites
- Colored text same as background to hide words
- Repeated URL submissions to search engines
- Fake pages for search engines
- Slow pages
- Pages with same HTML title
- Pages with same content but different URL
- Special characters in URL (& and %)