Tuesday, July 8, 2014

Day 27 - 10 Color Tips for UX Visual Design

"Why do two colors, put one next to the other, sing? Can one really explain this? no. Just as one can never learn how to paint." ~ Pablo Picasso

Casual observations and anecdotal evidence about color suggest that in can persuade decision making. Color matters although ultimately the psychology of color and color preferences are dependent on personal experiences.

When dealing with color:
  1. Use existing colors that are on brand and follow the brand's style guide or visual specification.
  2. If no previous color specification exists, free color generators such as Adobe Kuler or Colour Lovers can help you explore color themes and palettes.
  3. Color is part of your brand's personality. Keep it simple and use it wisely.
  4. Choose a harmonious font color palette for your headings (titles), subtitles, body text, and links.
  5. Ensure that your font colors are accessible to people with disabilities and have proper contrast.
  6. If you're on brand but you're at a deadlock as to which of two colors to use for your call to action button, run an A/B test on the colors.
  7. Combine color with design fundamentals like shape, space, and typography. Don't rely on color alone. 
  8. Test pages and designs by going to grayscale to make sure usability doesn't break when color goes away.
  9. Use tints and shades instead of additional colors.
  10. Although subjective, think about emotional reaction:
  • Red: Exciting, passionate, dangerous
  • Pink: Sweet, young, energetic
  • Orange: Friendly, tangy, pleasing
  • Yellow: Energetic, warm, cheerful, cautious
  • Gold: Stable, elegant
  • Green: Alive, friendly, organic, money
  • Dark Blue: Peaceful, stable, logical, trustworthy, water
  • Light Blue: Healthy, cool, young
  • Purple: Elegant, mysterious, regal
Now it's your turn: Look up the meaning of complimentary colors, as wells as analogous colors and see how they relate to each other on the color wheel.

Monday, July 7, 2014

Day 26 - Changing Careers from Graphic Design to UX Design

The old graphic design world is based in static or print design. Today's design requires motion, depth, and interaction.  If you want to make the transition into a user experience design career, it's going to take work.
  1. Pick an area to focus on whether it's interaction design, visual design, content strategy, etc.
  2. Learn UX.  Even if someone can't afford to go to school for UX there's endless information on the web to help you hone your user experience skills from YouTube videos, to sites about UX, to free online courses.  Pick an area you'd like to focus on and allocate a specific time each day to learning and studying materials related to your field.
  3. Network and find mentors.  We live in a connected world now. Be proactive and reach out to people.
  4. Practice UX.  Create a project for yourself. Create a portfolio that tells stories and solves problems.
Design challenge: Pick a project or create your own user experience curriculum.  Tell us about it in the comments.

Saturday, July 5, 2014

Day 25 - Tracking UX Metrics

What is a performance metric?  Metrics measure a project or product's performance. They are the data, numbers, and goals used to track the health and success of a project.

Measuring user experience success:
  1. Track the metrics related to your top goals.
  2. Determine what's most important to track and keep the number of metrics very small, probably one metric. For example, are you focused on retention or growth? How much will improvement in user experience help? 
  3. Engagement. Track things like how often customers use the service, upload photos, tag content, search with your product, interact with the features, sharing, etc.
  4. Track happiness. Create user surveys to examine what people think.
  5. Consistently measure and check user comments, feedback, ratings, and reviews to see where your users' pain points are so you can address them.
  6. Task success. Are users completing tasks, abandoning workflows or getting errors.
  7. Time. How much time do people spend using your service.
  8. Compare conversion rates or sales before and after the updates to the user experience using metrics such as average revenue per user (ARPU).
  9. ROI (return on investment) is always calculated in terms of increase or decrease of some key variable such as increased sales, customer loyalty, lower attrition, increased engagement, decreased support costs, etc.

What measurements do you use to track user experience for your product or service? Share your suggestions for tracking ux metrics.

Wednesday, July 2, 2014

Day 24 - Mobile UX Tips to Improve Usability

Follow these mobile design tips to improve usability for your mobile customers.
  1. Innovate but don't reinvent the wheel.  Use mobile design patterns and models.
  2. Keep context in mind. Mobile users are on the go.
  3. Design for the immediacy of now.
  4. Don't let interruptions get in the way of user experience. Make the app easy to disengage and easy for people to pick up where they left off.
  5. Align with device conventions so as to not create confusion, e.g. don't user iPhone controls if the app is running on an Android device and vice-versa.
  6. Ensure that your designs are tap and finger friendly.
  7. Break larger tasks into smaller ones so that you don't overload the user.
  8. Use in app analytics such as Google Analytics or Flurry to measure and improve the experience.
What are some other best practices?  List them out or add them in the comments below.


Day 23 - What is Responsive Design?

People use phones, tablets, and desktop computers every day, and there are more devices on the way. With so many form factors, one strategy to display content appropriately for a device is responsive design. Responsive web design is a type of design strategy where you create once and run your content everywhere e.g. phone, tablet, desktop. The site design automatically adapts to how the site is being viewed. In other words, the website responds to the needs of users based on the devices they're using.

An advantage of responsive design is that you maintain one design system rather than building and maintaining separate apps for the various device types.

When designing for responsive:
  1. Define the problem.
  2. Start with the content. It's not safe to assume screen sizes, they're changing.
  3. Design and develop prototypes using gird frameworks such as Foundation or Twitter Bootstrap.
Responsive techniques allow your product to be flexible and adjustable to the different device types and screen sizes while being accessible and future friendly.

Here are some responive design examples.

Take a look at websites on both your phone and a laptop to see how they respond.  Are they using responsive design? Are they using two different systems like mobile web and a desktop web design?

Day 22 - Mobile Basics: Bluetooth Low Energy

Bluetooth low energy or BLE is ideal for applications such as sensors, remote controls, smart watches, health measurement apps, and fitness tracking apps to name just a few use cases. Devices such as Fitbit wristbands pair with your phone using Bluetooth LE to track your body's exercise and sleep patterns.

Bluetooth LE is a technology built in to devices that uses far less power than standard Bluetooth connections that can last for "years" without needing battery replacement or recharge.  Rather than a persistent connection, BLE uses short bursts of data and powers itself off again when finished sending the data. So it's low energy.

The Bluetooth LE on your device can be used to pinpoint your precise location.  There are BLE devices to track your wandering pets, your lost keys, and many more on the way.

How many use cases you can think of for creating new services or apps for Bluetooth LE?  Make your own list or share them in the comments area.

Tuesday, July 1, 2014

Day 21 - Mobile Device Fragmentation

There's dozens and dozens of smartphone and tablet manufacturers which means device diversity with large numbers of different screen sizes, densities, and resolutions.  We need to develop a basic understanding and be aware of this when designing for mobile.  Designing for the wide variety of sizes and densities can be challenging.

When designing for mobile:
  1. UI needs to be able to adapt to those different devices.
  2. Know the difference between responsive design, mobile web, native apps, hybrid apps.
  3. Don't think that a smartphone screen is a small desktop screen. They are different experiences.
  4. Understand the basic leading target platforms Apple's iOS, Android, and Windows Phone.
  5. Understand why you are choosing one platform over another.
  6. Understand the context of how your mobile app will be used by your target user.
  7. Plan early so as to minimize the amount of time and effort required for your platform/s.
  8. Have a basic understanding of the phone's built-in hardware capabilities that can enhance the experience.
  9. Pay attention to device density and documentation.
Take a look at ScreenSiz.es
It's a screen size chart of common mobile devices sortable by device name, operating system, screen size, resolution, pixels per inch, density, and popularity.