Saturday, August 30, 2014

Day 53 - Maslow's Heirarchy - Designing for Motivation

Maslow's heirarchy of needs is a theory in psychology about human motivations.


The motivations are often portrayed with the most fundamental needs at the bottom of a pyramid and the self-actualization needs at the top.

Psychological needs -  basic human needs like breathing, food, water, sex, excretion..

Safety needs - personal security, safety, health, order, shelter..

Love and belonging - social interactions, relationships, friends, family, community..

Esteem - recognition, status, prestige..

Self-actualization - peace, knowledge, self-fulfillment, personal growth..

As an exercise, think of any product or service and where you would place it on the pyramid diagram.
Here's a small list to get you started.
Health and fitness apps, blood pressure apps, games, the iPhone, Google Docs, wikipedia, a Prius, a Tesla, Chase Bank, Geico auto insurance, AirBnb, Match.com, Bayer aspirin, cotton candy...


Wednesday, August 27, 2014

Day 52 - 10 Tips to Critique Design Work and Be Critiqued

Having your design work critiqued can feel stinging. Likewise critiquing someone else's work or providing meaningful feedback can be painful as well as you might be afraid to be honest.
Here are tips for providing relevant feedback.
  1. Use formal critiques
  2. Set the critique guidelines e.g. goal is to make product better not to personally criticize
  3. Set the stage for the critique by reiterating business goals, customer goals, schedule
  4. Be candid and specific
  5. Tie everything to goals
  6. Confirm what works
  7. Discuss problems first then propose possible solutions
  8. Walk in the customer's shoes and simulate the customer experience
  9. Gather feedback and discuss
  10. Write down feedback

Tuesday, August 26, 2014

Day 51 - Dark Patterns - "Sneak into Basket"

Not all design is good design.  Some websites and apps are downright deceitful the way the try to trick their users. Learn to recognize dark patterns but don't use them.

One dark pattern is called the "Sneak into basket" technique.
The sneak into basket approach is used in eCommerce when a user attempts to buy a specific item. Somewhere in the customer's purchasing workflow the site sneaks an additional item into their basket often through the use of an opt out button or check mark on the previous page or below the fold.

Some dark patterns such as "sneak into basket" are now even illegal in the UK.

When up-selling or cross-selling additional products, services, or features to your users, be open about it.

Monday, August 25, 2014

Day 50 - Usability Testing - Vendors vs. DIY

When recruiting interviewees for usability and research tests you can either partner with a vendor or do it yourself depending on the budget and scope of your project.

USING A VENDOR:
  • Can save you time
  • Be expensive
  • Give you less control
  • Leverage usability testing skills they may be better at
  • Access to user and client relationships you don't have
  • Provide blind testing
THE DO IT YOURSELF (DIY) APPROACH:
  • More of your time
  • Cheap
  • More control
  • You own the relationships
  • Can be blind
  • Learn about your users by doing your own recruiting

Day 49 - Web Design Tip - Above the Fold

"Above the fold" is originally a newspaper term describing the upper half of the front page where the most important stories and headlines of the day are located.

According to a Jakob Nielsen study on scrolling (in his book "Prioritizing Web Usability"), only 23% of the visitors in his study scrolled. Most people don't scroll down a page.

When designing your website, you generally should keep your primary call to action and succinct value proposition above the fold so users don't have to scroll down or work to find out what your site is basically about.

You only have a few seconds to pique and maintain someone's interest when they come to your site before they hit the back button and abandon the web page. Reduce this friction by showing them the value quickly the moment they hit the page and encourage them to take action.

Day 48 - Usability Testing - Getting Participants for Your Research

How would you go about finding people to interview for your research and usability testing of your prototype?
  1. Have a tight deadline.  Lock the calendar date of when your user interviews will take place.
  2. Create a screener questionnaire by defining your criteria, writing the questions and creating a Google Form. Also see Google Venture's worksheet for writing a screener.
  3. Create a Craigslist Ad with a link to your form.
  4. Offer payment or reward for participants.
  5. Choose your interviewees carefully. Your ad and questionnaire should be used to vigorously filter out and disqualify candidates that don't meet your target user criteria.
  6. Get NDA signed - Get their permission/signature to record the interviews. Also, "The ideas that come out of this, I own that".

Sunday, August 17, 2014

Day 47 - User Behavior - Fogg's Behavior Model

BJ Fogg's Behavior Model illustrates how three ingredients must simultaneously come together in order for a user's behavior to occur.
  1. Motivation - Pleasure/pain, hope/fear, social acceptance/rejection.
  2. Ability - How proficient is the user in doing something. Is it easy to do, hard to do? These elements affect ability:  time, money, physical effort, brain cycles, social deviance, non-routine.
  3. Trigger - Triggers are a call to action that tell people to do it now.

Thursday, August 14, 2014

Day 46 - Customer Journey Key Principles

  1. Put your customers in control.
  2. Let them explore before they commit.
  3. Let users purchase as a guest. One time customers are especially appreciative of this.
  4. Make it easy to finish on another device.
  5. Take advantage of existing user information you already have to make conversion as easy as possible.
Read more about Customer Journey Tips.

Sunday, August 10, 2014

Day 45 - 3 Content Strategy Rules of Thumb

  1. Identify your objectives.
  2. Think and write like your audience.
  3. Be SEO friendly.

Saturday, August 9, 2014

Day 44 - User Interface - 10 Modal Window Best Practices

A modal window is a pop up window that displays content while temporarily blocking the main page behind it.  The modal window requires users to interact with it before it can be dismissed. Modal windows prompt users to take action and provide fast, focused, contextual interaction.

Logging in to a website is one example where you could have a modal interaction. From any page you could sign in, complete the form, then get back to your task.
  1. Make sure that modal windows are accessible to users with disabilities.
  2. Can be used to draw attention to vital pieces of information and calls to action.
  3. Can be used to block the application flow until the user enters the required information to continue.
  4. The can serve as a notice or warning that the effects of the current action are not reversible, e.g. "..the files will be permanently deleted".
  5. Include a clear visible title on the modal window that matches the button text on the main application window they clicked.
  6. Offer a high contrast close button in the top corner.
  7. On desktop computers allow users to cancel the modal window with the esc (escape) key.
  8. Avoid scrolling in modal windows.
  9. Don't make the modal too wide or tall so that it's partially obstructed to the viewer.
  10. Modal windows can be effective but can also frustrate users when done wrong or over used.

Friday, August 8, 2014

Day 43 - When We Sell UX

As User Experience practitioners we need to be able to sell UX. When we sell UX we need to:
  1. Figure out what is most valuable to our users.
  2. Show the value of UX by speaking the language of our users. Don't use technical industry jargon that people might not understand.
  3. Show empathy for the team you are selling to. They are your customers too, not just the users.
  4. Teach your customer (the client hiring/paying you for UX) to want to desire what you know will help them.
  5. Figure out what is valuable to them (the client).
  6. Explain the value of your UX work to them in terms of "less rework, time saved, more revenue, customer satisfaction".
  7. Don't just speak in terms of deliverables. Speak in terms of meaning and strategy - challenges, problems to solve for, aspirations, activities.
What methods do you use to sell UX?

Thursday, August 7, 2014

Day 42 - Write a UX Thesis Statement for Your Product Design

A thesis or problem statement is a formal declaration put forward as a premise to be proved.  It represents the values and promise your product will solve in a short sentence or two.
  1. Write down the problem or current state not worrying too much about the quality at this point.
  2. Focus on the desired and future state.
  3. Define how your customer's life is better because your product exists.
  4. Consider what your design does for your customers AND your stakeholders.
  5. Edit, Edit, Edit. Rewrite, Rewrite, Rewrite.
  6. A thesis statement must be a declarative statement.
Take a look at the Product Hunt page.  These aren't thesis statements per se but great examples of articulating value propositions in just a few words for each product. The tag lines for these products are short and to the point.

Monday, August 4, 2014

Day 41 - Get Comfortable with Your Wireframing Process

Wireframes are the diagram flows which show the functional elements of a website, app, or component. There isn't only one way to wireframe. People use different processes.  Find the process that's most efficient for you and and the team that you need to deliver to.

Here are some approaches:
  • Sketch  --> Wireframe  -->  Visual Design  --> Code
  • Sketch  --> Wireframe  -->  High Fidelity Wireframe  --> Visual Design  --> Code
  • Wireframe  -->  High Fidelity Wireframe  --> Visual Design  --> Code
  • Sketch  -->  Code
  • Wireframe  -->  interactive Prototype  --> Visual Design  --> Code
What's your wireframe process?  What has worked best in your experience? Let us know in the comments.

Day 40 - Interacton Design Techniques - Progressive Disclosure

Progressive disclosure is an interaction design technique that initially only shows users the most important actions required.

A print dialog box is a classic example of progressive disclosure. When you hit 'print' you're presented with a dialog box with a small set of choices. There's typically more print features and functionality that are initially hidden as to avoid end user confusion.

Using progressive disclosure techniques the user sees tasks unfolding via a dynamically expanding UI (e.g. a form grows with more choices).  This can help users form a correct understanding of the task.

Start by showing the UI controls for the first step of the task, and when the user's done with that step present them with the second step, and so on.   Users should have the ability to easily go back and change answers and change their mind about earlier choices.

Hiding advanced functionality early from novice users can lead to increased success of it's use later on.

While progressive disclosure techniques are applied in many products empirical research is required if you're going to employ these techniques.

Example of progressive disclosure:


Sunday, August 3, 2014

Day 39 - List of Prototyping Tools

A prototype is a preliminary model of a new product used to test and evaluate a design. It's purpose is to allow users of the software product/service to assess proposals for the design so you can get feedback, learn, and iterate.

Again, remember that the goal of building a prototype is not the artifact itself but feedback so you can learn.

Here's a list of prototyping tools:
  1. Axure
  2. Balsamiq
  3. Concept.Ly
  4. FieldTest
  5. Flinto
  6. Fluid UI
  7. Framer
  8. Interface
  9. Invision
  10. Justinmind
  11. Keynotopia
  12. Marvel
  13. Pencil Project
  14. POP
  15. Proto.io
  16. Solidify App
  17. UXPin
What prototyping tools and techniques do you use?  Add them in the comments.

Friday, August 1, 2014

Day 38 - 10 Mobile Interaction Design Tips

Taking complexity and making it easy is hard. Focus, iteration, testing, and polish is required for good app design. Keep these mobile tips in mind when designing an app.
  1. Stay focused on the goal.
  2. Start with sketching, not a computer. It's not about drawing it's about design.
  3. Match the interactions and affordances to your platform. Pay attention to developer design guides, conventions, and patterns.
  4. Less is more so keep it simple. Limit and consolidate the number of elements for a clean design.
  5. Provide the user with cues and meaningful feedback about their interaction whether the user makes mistakes or not.
  6. Create hints for users so you can lead them through a design.
  7. Build a visual and approachable hierarchy.
  8. Sliders should convey movement or progress.
  9. Remember to consider international users. Great icons don't require text. Just be careful of cultural bias.
  10. Empower your user with mobile interfaces that accommodate to their skills.  Your app should adapt with a learning process progression so that users can do things faster once they understand the basics. Let go of the hand holding and give them shortcuts so that the app alters itself to a user's comfortable experience.
Take notice of some of the best mobile interactions you've experienced as wells as the poor ones.  Think about the apps you interact with daily on your device and how you engage with them.  As a writing exercise list them out.