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.

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?

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.

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:

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.

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.