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.
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.
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.
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?
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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].
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.
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.
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.
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.
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.
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
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.
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 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.
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:
* 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.
Though I was completely exhausted from WIAD the day before, I was energized by the opportunity to meet new people and gain new skills. We casually formed teams based on a variety of strengths and job titles. My team contained a front-end developer, a graphic artist, a web designer and seasoned marketing guru. and they were all great.
UX Hackathon took place at General Assembly in Santa Monica and was an entire day filled with UX. My team was called “Interrobang.” What is that? I did not really know either. Here’s more information on Interrobang.
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:
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.
Jennifer Blatz explores the world of UX through words and imagery