Tag Archives: user experience

UX Tidbits: Affordance

Affordance illustration Jennifer Blatz UX design

An affordance is a perceived signal or clue that an object that an object may use to perform a particular action. We applications and sites use affordance to push users to make an action. It is very important to understand the types of affordances a UX designer can use.

Explicit affordance is signaled by language or an object’s physical appearance.

Pattern affordance are design patterns objects like logos, navigation ages, links and the magnifying glass to show search. Users are used to these items being symbolic and expect them to do certain functions.

Jennifer Blatz UX design
How do you think you should open these doors? Do you push or pull to open?

Have you ever seen a door like this? Have you ever pushed when you should have pulled? Or pulled when you should have pushed? Sure we have all been there. And we all hate that feeling of making a mistake and feeling embarrassed in public.

Keep this type of scenario in mind when you are designing something. Never assume that the user will know what to do with your design or control. And more importantly, NEVER make the user feel stupid.

UX Buzzwords: the same meaning?

Jennifer Blatz UX designer buzzword confusion

I attended a talk at BigD (the User experience design conference in Dallas) abut UX Buzzwords. The presentation was by Marti Gold, who is a energetic, snarky and colorful speaker. I love hearing Marti because she keeps it raw and real. She is also a fellow member of Ladies that UX Dallas.

Anyways, back to Marti’s talk, which she called “Buzzword Landmines: Ten Phrases That Can Undermine Your Best Ux Efforts.” Like I said before, Marti is a very entertaining speaker. And this presentation was no exception.

The gist of Marti’s speech was that when UX Designers use a buzzword or phrase, that might have a different meaning and interpretation by the business partner or product owner. In fact, ore often than not, the product owner does have a completely different idea of what your meaning of the buzzword is. The point of her talk was to avoid or stop using these buzzwords all together. So what are the dangerous, confusing UX words?

Here’s the list of UX buzzwords to avoid:

  • Iteration
  • Design thinking
  • UX
  • Disruptive
  • Content Strategy
  • Responsive
  • MVP
  • Brand standards
  • Challenges
  • Buy in

Big D Conference in Dallas 2017

Jennifer Blatz User experience designer Big D Dallas Design Conference.
Passing the time between conference tracks by chatting with the one and only Alan Cooper.

I recently attended the annual BigD conference right here in Dallas. We are really lucky to have such a wonderful conference right here in Dallas. It seems like Los Angeles, San Francisco and New York always seem to get the love of big conferences. So Brian Sullivan, a UX institution here in Dallas, set up our own local conference.

BigD has been held in Dallas now for 10 years, y’all. Like the locals would say. ha!

This year was a milestone year of BigD. The conference celebrated 10 years in existence. Yay! We had some great presenters and attendees this year including:

  • Alan Cooper
  • Jared Spool
  • Steve Portigal
  • Christian Crumlish
  • Along with several local UX “celebrities”

Th best part of me for this conference to to meet up with old friends and meet new ones. BigD is a great opportunity to meet other UX talent from the Dallas community and beyond. A lot of people do not have the time or interests to participate in local Meetup events. So this is a nice way to meet other UX folks and to expand my network. Plus, like I sad before, it’s a good opportunity to reconnect with old colleagues and coworkers. Oh, and it’s always fun to get a big of swag.

Jennifer Blatz user experience designer UX and BigD design conference Dallas

 

UX Tidbits

100 days of learning UX Design journal from Jennifer Blatz

Back in 2015 I pushed myself to learn a little something extra about User Experience for 100 days. Granted, I did skip a few days, but for the most part I was pretty consecutive. I got over 100 entries of quotes, laws, terms, principles, lists and more.

The practice was simple: keep a User Experience-focused journal and write down things that you learn. Force yourself to seek out some information every day. And keep a record of your findings.

As I am re-reading them today, some of the things have been forgotten. So I decided it would be good practice for me to resist and share some of the UX tips, tidbits and terms I am rediscovering. My new series called “UX Tidbits” will be in addition to my regular writings and insights. Please enjoy the new series of “UX Tidbits” and let me know what you think.

Usability review: talk to your users ASAP

As professional in the User Experience field, we’ve all heard it time and time again:

  • Test early and test often.
  • The only way to find out if it really works is to test it.
  • We do not see things as they are; we see things as we are.
  • The sooner you start to code, the longer the program will take.
  • Just because nobody complains doesn’t mean all parachutes are perfect
  • Don’t guess. Test.
Jennifer Blatz UX Design usability review and testing
If your product has a visual representation, and has not been built, go ahead and get user feedback from the visual mocks.

To get early feedback is easier said than done. I know that it takes time to create the visual mocks. Then things are moving so quickly (2 week sprints!) and it feels like we don’t have time to run our ideas by users. Finally, we feel like we know what it best for the product. We have done some user research. Our ideas have evolved as the project has progressed. We have made some decisions, that we think are for the better.

The earlier you test your site designs, the sooner you can find any problems and fix them.

But it’s this type of thought process that you need to take pause and stop in your tracks. Just when you think you are doing the right thing, that is the moment that your assumptions and biases are likely to creep in. So, this is a great point to take a break and get user feedback before you proceed down the rabbit hole any further.

To start with, we sent the wireframes to the visual designer to mock up our concept with more visual reality. We made sure that the flow we wanted to show the users was visually represented enough through our mocks.

Once the mocks were in a state we felt we could share with the user, we needed to figure out what type of information we wanted to gain from our usability review. Next, I came up with a brief list of topics and content we wanted to focus on.

Jennifer Blatz UX Design usability review
Have a script close at hand whenever you are conducting an interview so that you don’t forget key questions and concerns.

I wanted to first focus on the overall presentation and design, as well as have them look at the navigation and taxonomy that we were presenting. Then after getting their feedback on the overall design, I wanted to take them through a specific work flow, and see if it made sense to the user.

I think that a common error in usability testing is giving the person too much information as soon as they see your prototype. Don’t jump the gun!! Take this opportunity to get initial reaction feedback. Let the person participating in the usability review take a moment to take in the design, layout and wording. Let them get acquainted with the page and get that “first few seconds” feedback. Please don’t miss the opportunity.

Jennifer Blatz UX design usability test
Even if you only have wireframes, and not accurate visual mocks, share whatever design you have with your users to gather that valuable feedback on what you have started.

Then after taking a few minutes to talk to the user about the overall design, you can then take a deeper dive in to a work flow. I found that in this instance, the first half of the conversation focused on the website’s design, terminology and assessing if the user understood how to get started on some general tasks. In other words, I wanted to see if the navigation choices made sense. Also, I wanted to see if they had any cognitive dissonance with any of the terms we had used. Next, we asked the users how they would perform a specific task. In this case, it was how they would start to place an order. Along their usability journey, they brought up a lot of good questions and educated us on how they do this process now. It was all very insightful, and helpful to find out what we had done right, and what we needed to improve. That, my dear friends, is the whole goal of performing this usability review.

Want to watch the entire usability review live in the flesh? Please feel free to watch the video. If you have specific feedback on my approach or any aspect of my session, please share your thoughts in the comments. Just like designing a website or software, my research methods are always in a state of improvement and iteration. Please help me make my product, in this case ME, even better.

 

Prototyping canvas explanation

This graphic is part of the Prototyping class I am taking offered for FREE at iversity.com. I find this simple chart, that a person would fill out, is a good exercise in really getting your thoughts out on paper. I am finding that it is helpful to actually get the idea out of your head, and force yourself to get the ideas out on paper. And it is great to really push yourself to come up with more than one idea. Go for it! And use the chart below to explore the reasons and products you will need for your next prototype.

Frank Kloos: prototyping canvas explanation

Prototyping canvas worksheet Jennifer Blatz UX design

Visual designer for my life.com

I will soon have some work samples on the regular website in my portfolio, but I wanted to share some of the projects I’ve been working on as the UX Visual Designer at mylife.com.

As a UX Visual Designer, I design simple and innovative solutions to complex User Interface problems. Create multiple iterations and concepts for the final online product for desktop and responsive mobile formats. Actively participate in a fully integrated agile/scrum team with product managers, developers, engineers, QA and others. Recommend and implement copy and design changes to improve customer conversion and engagement.

User Experience Visual Designer at my life.com
User Experience Visual Designer at my life.com

CC-Fail-PRR-Email-10-14

15 Mobile UX Facts And Insights

I cam across this interesting article about UX and Mobile.

Read the entire story including links at Measuring Usability‘s website.

Designing a better user experience means making sure that users can access information and services across multiple devices, especially mobile devices (phones and tablets).  

In building a better experience, there are many questions about mobile device usage and how designers can best meet users’ needs with apps and responsive designs. We’ve conducted a lot ofmobile usability studies and in the process have encountered many common questions.

Here are 15 data points to help in answering some common questions about mobile usage and behavior. I’ve included as many sources as possible so you can double check our conclusions.

  1. Around half the US’s and 62% of the UK’s mobile phones are “smartphones.” The percentages are similar across Europe. Fortunately for us researchers, most consumers actually know what a “smartphone” is and whether they own one with around 8% not knowing what “smartphone” means. 
  2. Around 20% of the US population over the age of 18 owns a tablet.   It’s about evenly split between Android and iPad platforms.
  3. Tablets have a similar profile as desktops. While tablets get lumped together with smartphones, some data suggest that they are more similar to desktop computers.  Tablet users are more engaged and view about the same number of pages as desktop users. That’s about four times more than smartphone pageviews.
  4. People use full-size tablets at home and in the evening.  In addition to size, part of the reason for the homebound devices might be that only about half of iPads have cellular data access.  In fact, we found the most concentrated time was used at home, on the couch, or bed between 7 and 10pm[pdf]
  5. Most people have over 20 apps (5 or more paid for).  
  6. Most people forget what apps they even downloaded
  7. Most user prefer shopping using websites to apps. One of the more pressing decisions for mobile teams is whether or not to build an app. Going down the app path means supporting multiple operating systems and platforms (usually having different development teams). In our lab-based studies, we also generally see users spending the most time with the web browser and often not knowing whether they have an app or not.  One of the biggest complaints in the mobile browsing experience is the constant nagging of downloading apps and the non-continuity of links that don’t open the apps.  We generally see users prefer shopping on websites rather than using apps. The percentage changes depending on the industry, app and demographic but the app should offer a compelling experience, rich features or something you can’t get in a browser. Update: Changed a link title that cited a somewhat misleading figure suggesting 87% of consumers preferred apps over websites. 
  8. Around half of US smartphone users use their mobile phone to compare prices while in the store. The percentage is a bit lower for Europe.
  9. Most tablet owners still have another desktop or laptop, and despite high usage, it’s still not considered the primary computer. 
  10. Most smartphone users haven’t scanned a QR Code. But if they do it’s usually for finding more product information or obtaining discounts.  
  11. Portrait vs. Landscape?  For viewing content it’s about evenly split with 54% preferring portrait mode.   However, landscape might be more popular for using certain apps.
  12. Conversion rates from tablets are four times higher than smartphones 5% vs. 1% (about the same as desktop conversion rates). 
  13. Consumers who own both a tablet and a smartphone were significantly more likely (63%) to indicate increased overall mobile spending than owners of smartphones only (29%). Larger screen size, full keyboard, and touch screen capabilities are cited as the main reasons for a better shopping experience
  14. Security is a still a major reason why mobile users don’t make purchases. In our 1:1 lab interviews, we consistently hear fear of stolen data as often as usability and screen size as reasons why users don’t like to use credit card or bank information on mobile phones and tablets. 
  15. The more consumers consider and research a purchase, the more they use their smartphones to find product information. For example, 73% of mobile usage in electronics stores was to read product reviews.

Usability Testing for User Experience Course

When testing the Weather Channel App, I discovered a number of usability issues. Clearly, if the UX team had run some basic usability tests, a number of problems would have discovered and corrected.

Some issues I discovered:

• Make clickable items like buttons seem clickable.

• Remove ads within the feed, especially if they look like weather (editorial) content.

• Do not use ads as a background image on home page.

• Put useful information like search functionality in side drawer.

• Put more information, like a few days’ forecast on the home page.

• Use arrow indicator to notify the user to scroll down.

• Do not include every searched location in the favorites list.

• Allow user to just search a location without saving it.

• Allow users to include more than 10 locations in the favorites list.

• Clearly indicate current city with writing the city name, rather than relying on image.

• Give clues on social weather page as to what the icons mean and what will happen before a user clicks the icon.

• Make icons intuitive and less confusing and add a word them to clarify the function.

• Allow user to return to the top of page by tapping on the bar at the top of the screen.

• Move radar closer to top of feed. Or allow users to modify the order of content or remove something that does not interest them.

weather channel app usability problems
Make sure that items that are clickable in an app or website are clear to the user

Website Evolution: Sketches

It’s great to get some ideas out of your head and on to some paper. I know it may seem strange. But sketching is a great way to brainstorm and to visualize how things actually fit together on the page or screen. Plus sketching is a great communication tool. Want to have a discussion about some of the ideas you have? Sketch them out and use them as talking points to move the project forward.

I used skating and the first phase to exploring some ideas for a history page I was working on for a website redesign.

Use sketching as a communication tool to get the ideas out of your head and on to paper.
Use sketching as a communication tool to get the ideas out of your head and on to paper.

The difference between UX and UI

I find that User Experience and User Interface are often used interchangeably. I was not even sure that I understood what the difference was. So I decided to do a bit of research on the internets and compiled a brief list describing each discipline. I know these are long lists. If you have some comments, please share with the group.

User Experience

  • UX is the overall experience one has with a product or service, which can include a UI.
  • User Experience is how they feel when they look at the site, aka the broad scope.
  • The interaction itself
  • Includes interfaces
  • Addresses all aspects of a thing as perceived by a person
  • UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service.
  • UX-er is known as the primary user-advocate on a team
  • UX informs creative
  • Developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements
  • UX design is all the methodological steps that lead you to the conclusion on how to design the UI. They are responsible for how they feel when interacting with the interface or product.
  • Generally start by conducting user research and interviews. The goal with this is to understand exactly what the users’ needs are.
  • The wireframes are essentially the blueprints of what the UI designer will use to create the interface that the user interacts with.
  • One who designs the user experience for applications after doing user and workflow analysis, producing user-centered design artifacts such as personas, site maps, taxonomies, and wireframes. A UX Designer may also conduct usability testing on prototypes or finished products to assess the quality of a user experience.

User Interface

  • UI is typically a combination of visual design (the look and feel) and the interaction design (how it works).
  • User Interface design is the part of the product that faces the user when he looks at the site.
  • A tool
  • A point of interaction
  • A means of communicating between a person and a system
  • UI (aka ‘GUI’) visual design is the graphical user interface of a software product/service
  • The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles.
  • The design of a GUI should be heavily informed and guided by the problems that were solved during UX process.
  • GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
  • Interaction Design is the grey area between UX and GUI design.
  • Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface.
  • Innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5
  • User Interface (UI) Design generally refers to the user facing side of any type of physical interface
  • A UI designer is responsible for everything that a user will see on the interface.
  • UI designer’s responsibility to understand what the users’ needs are. They must be able to arrange the interface in a simple way that allows for the best user experience.
  • One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.
  • UI Developer’s output is functional, testable, shippable code that lets users accomplish their goals when using an application. The UI Developer is also responsible for documentation that allows others to maintain their code.
  • A UI designer may have the ability to create interactive designs, icons, colors, text, and affect a number of other elements that solve problems dealing with direct interactions to the user. Those elements are fantastic tools to affect user experience but they are only part of the equation.
  • The very minimum:
  • Learn HTML & CSS. Learn Photoshop. Learn basic typography.  Learn basic color theory.  Learn about layout.  Get a feeling for producing UX deliverables.  Learn about usability evaluation methods.  Learn the best practices for web design. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.

Competitive analysis is a valuable tool

I recently took it upon myself to compare three online movie ticket purchasing websites: Fandango*, movietickets.com and Arclight Cinemas. By comparing the features, design, content and user flow of similar websites, one can gain invaluable knowledge about their own sites.

When you compare your website to what a competitive website is doing, you will learn:

  • What your website or experience is doing right
  • What your website or experience is doing wrong
  • What your competitors are doing right
  • What your competitors are doing wrong

This is a great jumping off point in improving your own website or experience.

This graphic only shows some some of the insights I discovered when comparing websites. My brief overview is below:

Comparative Analysis for movie sites as a User Experience learning tool and step in the process
Comparative Analysis is a valuable process for getting your website up to par. See what other websites are getting right and wrong, and you can modify your own website accordingly.
* At the time of publishing this post, Fandango had not yet released its redesigned website and mobile app. Therefore many of the specific features I discuss here will no longer be applicable. However, going this process was still a great learning tool.

‘Healthy’ topic assigned, now get to work

The day after WIAD (World Information Architecture Day) I participated in another day-long User Experience event. This time, I was not a passive observer who had organized the event. I was a hands-on, jump-all-in User Experience designer.

We were assigned the timely topic of Healthcare, so we chose to redesign the Covered California website.  We did not feel that there was a clear call to action, so we wanted to simplify the interaction of the website a bit.

We were very tight on time, so we banged through a lot of brainstorming sessions, mind mapping and creative flow to narrow down the scope of the project.  Just before the deadline, the team created a few valuable assets for our 3-minute presentation. Some are shown below:

Information Architecture

UX-health-board

User Flow

UX-health-userflow

Redesigned Homepage

Interrobang UX Hackathon 2-14

UX Hackathon was an exciting experience and I learned a lot about working in teams, working under very tight deadlines, lean UX and creating deliverables in less than a day.