Wednesday, July 30, 2014

Day 37 - Real People Are What Matters

The user experience practice is filled with advantageous methods to gain insights into how customers operate.  When working in UX,  it's easy to put emphasis on the processes and tactics of user experience and drift away from the true needs of the customer.  Apply good UX techniques, but be mindful so as not to get stuck in pure academia.  People are what matter in user experience.

Rule of thumb: Don't get stuck in academia, focus on real people.

Tuesday, July 29, 2014

Day 36 - User Centricity

  1. In a UCD approach, your customers are the focus not the features.
  2. Design for users and their tasks.
  3. Use natural and easy to understand language.
  4. Show consistency and make your product approachable.
  5. Reduce anxiety and mental effort on the part of the user engaging your product.
  6. Every workflow has a trigger. Define what initiates a workflow based on the user's needs.
  7. Understand the context of when, where, and how the user will use your service.
  8. Additionally understand the context end points of what your users are doing before and after they're experiencing your product.
What are some of the best user centric solutions you've seen designed? List them in the comments.

Thursday, July 24, 2014

Day 35 - Device Breakpoints and Screen Size Detection

With so many new different computing devices on the market,  there are no common screen sizes. Breakpoints are the point at which your site's content or layout breaks on a device and needs to be adjusted for clarity and usability.

By adding breakpoints and screen detection rules about width and styling in the code (media queries in the CSS) your site's layout and typography can adapt legibly to multiple devices and screen sizes.

Test your web apps and sites on as many different devices as you can get your hands on. When the layout isn't working at a particular width and needs to be adjusted, define your own breakpoints in the CSS and adapt the layout.

Breakpoint rules of thumb:
  • Typically change styling of your documents so that it's best suited for the user using their device.
  • Always be concerned with readability and font sizes.
  • When designing for "mobile first" think "content first". It's the content and your design flow that defines the breakpoint, not the pixel width of the most popular device.
  • Make your designs adaptive so that they're future friendly as widths are growing and changing.
  • Horizontal scrolling is a bad idea.
  • It's not probable that you can cover all device types, but try and design usable solutions for your customer segments.

Wednesday, July 23, 2014

Day 34 - Product Market Fit

What is Product Market Fit?  It means being in a good market and the product can satisfy that market.

When you achieve Product Market fit the experience is so good it's a leap forward and drives a user to adopt a new behavior e.g When Uber first came on the scene people hadn't experienced pushing a button on their phone that would immediately summon a classy, reliable ride at their behest.

BUT, the market size matters most for Product Market Fit. You can build a better mouse trap (software solution or experience) but if there's no mice (customers) it doesn't matter.  For a product to be successful, it's not enough for the product to be great, the customers have to WANT it.
  1. Articulate a value proposition and try and validate by testing with real users. Talk to real people.
  2. Build something people want that solves for THEIR real problems, not yours. Ask them what their pain points are.
  3. Product Market Fit is essential before substantial growth of your user base.
  4. Usage - If at least 40% of your users would be unhappy if your product were no longer available you've reached Product Market Fit.
  5. Marc Andreessen of Andreessen Horowitz says that "The only thing that matters is getting to product market fit."

Thursday, July 17, 2014

Day 33 - Ten Onboarding Tips for First Time User Experience

New users opening up an app for the first time need help understanding what is going on. The interactive wizard-like flows of Onboarding users introduce and engage your audience as to what your product's all about.

Onboarding is the process of increasing the chances that new customers become successful in embracing your product the first time they try it out for themselves.

Your product design should be so great that it requires no onboarding process. Few prodcuts are that good.  Onboarding is there to ensure a customer successfully engages with your product or service.
  1. Guide the customer through the first time experience but let them do it. Customers learn by doing as you show them not by you telling them.
  2. Visual cues, highlights, subtle animations, and popover bubbles can be helpful in focusing their attention through the onboarding flow.
  3. Simple explainer videos can help. Although if you need lots of videos and manuals to explain how to use your product, your product's usability might not be very good.
  4. Focus on the core, relevant experience. Don't cram all the features into onboarding.
  5. Keep it short and get right to the "Wow" action so that the user can engage.
  6. Onboarding should be dead simple to understand, delightful, and work perfectly.
  7. Remove distractions and lock down features that may veer them off the onboarding process.
  8. Be adaptive. Confine users to an onboarding path of success, but let them skip the onboarding process if they wish to.
  9. Customers should have the ability to abandon the onboarding process at any time and be able to come back and change their responses.
  10. Always be tweaking and improving your onboarding process.
  11. Identify the must-have experience that keeps people coming back and incorporate that into your onboarding.
  12. Interview people who finish the onboarding tour and become highly engaged users. Interview people who abandon the onboarding process.
Action: Study the onboarding process of successful games like Candy Crush. There's a lot you can learn from the first time experience tutorials of popular games that you can incorporate into your user onboarding procedures. Tell us about great onboarding processes you've experienced in the comments.

Tuesday, July 15, 2014

Day 32 - 7 UI/UX Principles of Great Design

  1. Good design let's the interface disappear behind the experience.
  2. Users are "Wow'd!", surprised, and delighted.
  3. Recurrence. People love your product so much they use it daily.
  4. People put your app icon on their home screen or desktop screen for quick access.
  5. Users would be terribly sad if your product was gone.
  6. People tell other people about your app.
  7. And oh yeah... scrolling is often faster than paging.

Sunday, July 13, 2014

Day 31 - 6 Lean UX Tips

Lean UX is a set of flexible activities that teams use to attempt to rapidly create user experiences. Lean UX is based in agile and lean startup methodologies where the team (stakeholders, product, design, development, etc) swiftly creates prototypes, tests, and iterates while balancing business needs and customer needs. The key is to externalize and share broadly.

A teams's lean ux process may look like this:
Strategy session -> Business needs -> Audience needs -> Ideation -> Sketching -> Prototyping -> Testing

Or put another way:
  • Think
  • Make
  • Check
  1. Understand the business/customer needs and have the problem you're solving for articulated. Get stakeholders aligned and get business goals prioritized.
  2. Have stakeholders work on the big picture concept. The designers should work on the details.
  3. Make customer personas rapidly getting people to show them to each other and present them.
  4. Scenarios - what are these customers thinking about in the moment they are engaging. What motivates the persona? People can work as teams on this.
  5. Ideation and Sketching. Get people to individually, rapidly create/sketch volume in this step and quickly iterate on the designs. Present them and show them to everyone, critique and iterate.
  6. Prototype and Test continuously. Prototyping is a strategy for efficiently dealing with things that are hard to predict.
What Lean UX tips do you have? Share your Lean UX tips in the comments section.

Day 30 - Mobile Basics: Voice Recognition

Speech recognition uses your voice commands to interact with applications. It converts spoken words to text, allows you to perform searches, send messages, set reminders, interact with maps, dictate orders, etc.

Although voice recognition technologies have been around for many years the technologies have a long way to go before they truly recognize natural conversation.

Things to consider when designing for speech interactions and touchless operations:
  1. The voice persona.
  2. Provide immediate feedback for every speech input.
  3. Is active voice vs. passive voice preferable.
  4. Is voice support absolutely necessary.
  5. Will voice be used for both input and output.
  6. Environmental barriers e.g. people around you listening in to your voice commands, privacy concerns.
  7. Error rates in speech recognition can lead to abandonment of the product.
  8. Avoid modes, but allow users to quickly turn speech recognition on/off or easily switch to other ways of interaction.
  9. Use speech when the user's eyes and hands are busy.
  10. Developing the right voice interactions can make the user experience more human.
Technologies such as Apple's Siri"Ok Google", and Microsoft Cortana open up a world of interaction possibilities.  What are some ways you use voice interactions?

Thursday, July 10, 2014

Day 29 - Mobile Basics: Accelerometer

Built into the circuitry of your mobile phone or tablet, the accelerometer is a miniature device that knows up from down and is commonly used to change your screen from portrait mode to landscape view when you turn it.

By reading data from the physical world into your app, the accelerometer reads in that sensor data and does something relative to gravity or acceleration.

Besides portrait and landscape orientation, the accelerometer can be applied to other uses such as:
  1. Controlling sound when you tilt the phone.
  2. Creating a jump rope sensor fitness app via the accelerometer sensor.
  3. Calculate the steps you take whether walking, running, or jogging.
  4. Detecting when to snap a photo via shaky hands by sensing when you're holding steady.
  5. Shaking your phone to lock it.
There's endless ways to incorporate the accelerometer into the user experience.

What are some creative ways you can use to apply the accelerometer to your designs?

Wednesday, July 9, 2014

Day 28 - Mobile Basics: Gyroscope

The gyroscope is a hardware sensor in your phone and tablet that gives you the changes in any rotation orientation of the device.  It rotates around gravity.

Used with other hardware features like the accelerometer, magnetometers, and compass, the gyroscope can be used for augmented reality apps, gaming, and navigation systems to name a few examples.

An example of an app that uses a gyroscope is a constellation app whereby the user simply points their device to any part of the sky to identify constellations, stars, and planets.

When designing for mobile, don't just think in terms of a flat space on a 2d screen. Think about 3d space, the environment a user is in, the context of the problem you're solving, and how the mobile device hardware can be used in your designs.

What sort of applications would you design that take advantage of a phone's gyroscope?

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.