Definition:
HTML, CSS and JavaScript templates/frameworks.
 
Three types:
1. Developer-centric pattern, focus on quick code production turnover.
2. Designer-centric pattern, emphasise problem solving through general UI recommendations.
3. Combination of 1 & 2, allowing developers and designers to work in tandem, CSS frameworks like Foundation or Bootstrap.
 
When to use:
When you have multiple teams working on a suite of products and each team is doing Rapid prototyping on a different product.
 

Definition:
A prototype is an approximation of an experience that allows you to simulate what it is like to use the product or service in question.
 
Four basic types:
1. Paper Prototypes (Lo-fidelity).
2. Clickable Wireframes (Lo-fidelity).
3. Prototyping tools, e.g. Axure (Mid to high fidelity).
4. Rapid prototyping, coding with a CSS framework like Bootstrap (High-fidelity).
 
When to use:
1. When creating a Minimum Viable Product (MVP) in Lean UX.
2. When you want to facilitate usability testing of new/amended wireframe designs.
 
Paper Prototypes PROS
1. Can be created in an hour.
2. Easily arranged and rearranged.
3. Cheap to do.
4. Can be assembled with materials already found in the office.
5. Fun activity that many people enjoy.
6. Small learning curve.
 
Paper Prototypes CONS
1. Rapid iteration and duplication of the prototype can become time consuming and tedious.
2. Simulation is artificial without using a mouse, trackpad, keyboard, touch screen, etc.
3. Feedback is limited to the high-level structure and flow of the product.
 
Clickable Wireframes PROS
1. Provides a good sense of the length of the workflow.
2. Reveals major obstacles to primary task completion.
3. Allows assessment of findability of core elements.
4. Small learning curve.
 
Clickable Wireframes CONS
1. Need people to understand it’s an unfinished product.
2. More attention is focused on words and layout.
 
Prototyping tools PROS
1. Produces high-quality and realistic prototypes.
2. Visual design and brand elements can be tested.
3. Workflow and user interface interactions can be assessed.
 
Prototyping tools CONS
1. Interactivity is limited.
2. Using static data limits the simulations you can do.
3. Time-consuming to create and maintain (keeping it in sync with the actual product).
4. Slow mobile loads, e.g. Axure’s master responsive templates can slow down your prototype’s page loads to over a 30 second wait.
5. Need to learn coding logic (if/or/else/not/equals statements) to simulate advance interactions.
6. Bug testing coding logic is not scalable in most cases.
7. Medium learning curve, will take you over a week to be good at it.
 
Rapid prototyping PROS
1. Potential to reuse code in production.
2. The most realistic simulation you can create.
3. Can be generated using existing code assets.
4. Can hook designs up to real data on the coding backend.
 
Rapid prototyping CONS
1. Can get bogged down in the finer points of the prototype.
2. Time-consuming to create working code that delivers the desired experience.
3. Tempting to waste time perfecting (optimising) the code.
4. Updating and iterating can take a lot of time.
5. Big learning curve if you can’t code already, will take you over a year to be good at it.
 

Definition:
Website’s navigation, a tree structure of terms, reflecting the majority of user’s assumptions of:
1. The term an item should be referred too as (example being ‘Football’ in England, ‘Soccer’ in America).
2. How terms should be grouped (example being ‘Football’ would go in the group ‘Sport’).
3. The Hierarchical order of groups of items (which level of navigation should the group go on? ‘Sport’ would typically be on the global navigation).

 
When to create a new Taxonomy
When asked to improve the usability of website or improve conversion rates. Improving the taxonomy will make finding content easier for your users.
 

These are the steps I follow to create taxonomies…
 

Finding terms:
1. Loosely structured interviews with domain experts at first, once you are sure you’re asking the right questions go on to structured interviews. Usually they are willing to talk to you for free over a coffee. I use social media to recruit them, typically Twitter. I find them through using keyword search terms, then follow them on Twitter, if they follow back I can then direct message them.
2. Competitor Analysis, record what terms they use.
3. Open card sorting with domain experts.
 

Grouping terms:
1. Closed card sorting exercise with users or domain experts. Typically I recruit 15 participants that reflect the website’s Personas. With each participant I do a closed card sorting exercise with a think aloud protocol. This allows me to understand how they expect the terms to be grouped.
2. Competitor Analysis, record how they group their terms.
 

Defining groups hierarchical order
Using notes taken from card sorting exercises I workout the average taxonomy participants have chosen. If website already exists, I also look at the analytical results and add found insights into the new proposed taxonomy. At this point we enter a negotiation period with websites editorial chiefs and heads of SEO to refine the new taxonomy.
 

Testing new navigation
Recruit participants based on personas and run usability tests with pre-written scenarios and tasks which test the robustness of the new taxonomy.

Definition:
Usability testing is a technique used to evaluate a product by testing it on users, it gives direct input on how real users use the product.
 
When to use:
Throughout an iterative UI design process, within every prototype iteration.

Definition:
Visual representation of a user interface, stripped of any visual design or branding elements. It defines the hierarchy of items on a screen. Based on user needs, a wireframe communicates what items should be in it and where.
 
Three basic types:
1. Lo-fidelity (pen and paper).
2. Mid-fidelity (black and white mock ups made using software, e.g. Balsamiq).
3. High-fidelity (colourful pixel perfect mock ups, e.g. Adobe Photoshop or Illustrator)
 
When to use:
Lo-fidelity for quickly ruling out weak layouts, and doing rapid iterations without investing much time.
Mid-fidelity for refining initial ideas/concepts, and to get feedback from stakeholders/users/colleagues.
High-fidelity requires less Client imagination, it is more effective at persuading Stakeholders to sign off ideas/concepts.