Simple Ideas to Make things Better

UX is UI

The Difference Between Information Architecture and UX Design

Not click. Not tap. Select. : Cennydd Bowles

Don’t cut corners when coding UI

7 Simple Rules for Creating Elegant UI Interactions

Unflattening design

5 Simple UX Principles to Guide your Product Design

What Separates Great Design From Good Design

A Front End Engineer's Manifesto

5 Things that Make Website Visitors feel Stupid (so avoid them)

Dropdowns should be used as a last resort

Apple's UI Design Do's and Don'ts

Detox Your Design: 8 UI Elements to Eliminate

How to use balance in web design

The 8 Worst UX Mistakes Coming From Experts

Delightful Design, Deconstructed

Design With Dissonance

Asymmetrical Design: Creating Beautiful, Balanced Layouts

UI Design for Passwords and Registration Forms

Revisiting :Visited

UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads

“Right-click and save as” needs to go away

Not click. Not tap. Not select. Press

Text on background image a11y check

A Psychological Approach to Designing Interfaces

Ignorance Beats Empathy

3 ways friction can improve your UX « Thoughts on users, experience, and design from the folks at InVision

Let the Browser Handle Your UI Logic for You

10 Photoshop Plugins to Speed up Your Web Design process

Why “Simple” Websites Are Scientifically Better

Little Big Details (not updated recently but full of good ideas)

Sometimes you just have to see it

Levelling Up: From UI to Product Design

Older but still informative - 10 Useful Techniques To Improve Your User Interface Designs, and Whitespace.

UX is all about simplicity

A good interface is like a joke, you don't need to explain it.

 

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

Source: http://mistermorris.tumblr.com/post/26063374202/ux-is-simple

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. The customer-centred 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 the 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 behaviour. 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 are different from those of customer-centred design. Software testing is often technology-driven, not customer-driven.
  • 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.
  1. Process

    1. Discovery
    2. Exploration
    3. Refinement
    4. Production
    5. Implementation
    6. Launch
    7. Maintenance

    Discovery

    Customer Analysis Document

    1. The motivation of customers to visit the site or the value proposition
    2. 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 website to do? What specific tasks do they want to do there? Etc.
      • Technology
      • Social issues

    Business Analysis Document

    1. Business plan- business goals of the site and client's needs
    2. 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)
    3. Metrics for success- how will success be measured? Examples: attract customers, keep them coming back, the conversion rate of visitors to customers

    Requirements/Specifications Document

    1. Project Description- describes the common purpose and ultimate goals for client and customer
    2. List of Tasks, Scenarios, Storyboards- number of tasks depends on the complexity of the 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 a statement on how it will be evaluated or tested.
    3. Overall design Goals
    4. Metrics- measure if the 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.

    Exploration

    • 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

    Refinement

    • Choose one idea and develop it further. Highly detailed prototype. Refine, detail and informally test the design. Break the site down into classes of pages.
    • Deliverables: one site map, storyboard and schematic (in more detailed form than previous).

    Production

    • Interactive prototype, written descriptions, guidelines, and specifications.
    • Include as much detail as possible on layout, navigation, visuals and content for each page.
    • Deliverables:
      • design document -describe how the site works in great detail.
      • Interactive prototypes
      • Technical specifications
      • Design guidelines - general rules to prevent inconsistencies
      • Writing style guide

    Implementation

    • Create parts of the site to create a 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

    Launch Phase

    • Minor polishing:
    • Check for spelling and grammar errors
    • Verify all links
    • Check for broken images

    Maintenance

    • 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
    • Deliverables:
      • 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
    • Synonyms
    • 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 the content on site
    • Keywords owned by other sites
    • Coloured text same as background to hide words
    • Repeated URL submissions to search engines
    • Fake pages for search engines
    • Slow pages
    • Pages with the same HTML title
    • Pages with the same content but different URL
    • Special characters in URL (& and %)

 

These are notes I made after reading this book. See more book notes

Just to let you know, this page was last updated Monday, Mar 18 24