Users have higher expectations than ever from the applications and websites you deliver. They expect information to be organized, intuitive, and easy to use. With an average of 10 seconds to make a good first impression, it's critical that your application aligns with your user’s expectations, wants, and needs. In this session, you'll learn 7 strategies to use on any project to improve the user’s experience and keep them coming back for more.
5. Tiffany Nolan Catherine Robson
Manager, User Experience Design
Red Hat, Inc
crobson@redhat.com
@catwrobson
Interaction Designer
Red Hat, Inc
tnolan@redhat.com
@tiffanolan
About us
13. Fuddy
Find Food Buddies at your next conference or event.
Establishes a connection and similar interests to be
able to chat at receptions.
No one wants to eat alone, and especially when you’re
on the road and in a new city. There are so many
unique and delicious restaurants to try out!
14. Masters degree in Public Communications
5 - 10 years of experience in her trade
Has changed companies about every 5 years
Is looking to grow in her trade
Social butterfly and excellent networker
Attend the conference to learn more about her trade
Network with others in different companies to open up job opportunities
Have engaging and interesting discussions with colleagues of similar interest
Expand her opportunities for the future
Wants to experience the city and locale of each conference as well as an avid traveler
“Going to conferences is such a great learning experience, but the best part is networking and meeting
new and interesting people I can learn from.
GOALS
Sometimes it can be hard to locate others who are really looking for the most out of the conference experience
Wants to find the restaurants and experiences that really provide a taste of the locale while at a conference, but
doesn’t always have time to research it
Cheryl always arrives the day before the conference starts, wanting to get the most out of her conference experience. She carefully
plans her sessions, but also knows that part of the value of the conference is open time to meet and network with other
colleagues. She makes sure to leave her evenings available for either conference sponsored events, or to meet with people she
meets throughout the day. She often wants to engage with new contacts that have similar interests and helpful associations, but
only occasionally stumbles across these at a given conference.
Cheryl Conference Attendee
PAIN POINTS
BACKGROUND
Goes to conferences a few times a
year and loves to socialize
DAY IN THE LIFE ….
More info...
15. TACTIC #1 | User stories
Epic
Cheryl likes to locate and meet new people
over dinner.
16. ● Cheryl would like to host an open reception
at a local restaurant, so she can choose a
restaurant she likes for people to join.
● Cheryl would like to browse existing
receptions by attendees so she can join the
most interesting evening conversation for her.
TACTIC #1 | User stories
33. Your goal is to
optimize the task.
TACTIC #3 | User flows
34. Downloads user flow
Current (March 10, 2016) - 8 Screens, 6 Clicks to accept all T&Cs and get download bits
Click Download
latest
Click REGISTER Click CREATE MY
ACCOUNT
Info: Email
verification
Click link to verify
email
Click ACCEPT Click CONTINUE
DOWNLOAD
Software
downloads
Downloads Log in Register Verify T&Cs More info Get started
Possible for Week of March 14 - 6 Screens, 5 Clicks to accept all T&Cs and get download bits
Click Download
latest
Click REGISTER Click CREATE MY
ACCOUNT
Click ACCEPT Click CONTINUE
DOWNLOAD
Software
downloads
Downloads Log in Register T&Cs More info Get started
Desired for End of March - 4 Screens, 3 Clicks to accept all T&Cs and get download bits
Click Download
latest
Click REGISTER Click CREATE MY
ACCOUNT
Software
downloads
Downloads Log in Register Get started
Email verification not required
Email verification not required T&Cs added to Register Form
New form with
multiple
checkboxes for
T&Cs
69. Research, Personas, User Stories
https://www.usability.gov/what-and-why/user-experience.html
http://www.uxbooth.com/articles/creating-personas/
https://www.mountaingoatsoftware.com/agile/user-stories
http://www.romanpichler.com/blog/10-tips-writing-good-user-stories/
Interaction and Visual Design
https://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111
http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
https://www.usability.gov/what-and-why/interaction-design.html
http://1stwebdesigner.com/graphic-design-basics-elements/
http://www.visualmess.com/
Testing and Feedback
http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/
https://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
http://www.measuringu.com/blog/essential-metrics.php
https://www.usability.gov/what-and-why/web-analytics.html
Additional UX Resources
70. Tiffany Nolan Catherine Robson
Manager, User Experience Design
Red Hat, Inc
crobson@redhat.com
@catwrobson
Interaction Designer
Red Hat, Inc
tnolan@redhat.com
@tiffanolan
Connect with usQuestions?
TIFFANY: Good afternoon and welcome to our presentation on 7 user experience tactics for developers.
TIFFANY: We’re happy you’re here with us for the next hour, as we talk about different ways you can improve the user experience of your applications. User experience is a topic we’re both excited about and we can’t wait to share with you some tactics we’ve used to not only meet, but exceed user expectations.
CATHERINE: With so many options on the market and for free today, users have higher expectations than ever from applications and websites you deliver. They expect information to be organized, intuitive, and easy to consume.
TIFFANY: What if I told you that your users should be able to find what they need in 10 seconds or less, and with only a few clicks? Would your applications pass the test?
CATHERINE: What if I told you that your users will only spend up to 20 minutes or less to evaluate your application in an initial technology bake-off? Could your users get started and accomplish something meaningful that quickly with your product?
TIFFANY: Hi! My name is Tiffany Nolan and I am an interaction designer focused on webux. I am currently working on the Red Hat Developers website. I have worked on web applications for more than 15 years in both designer and developer roles, sometimes even at the same time.
CATHERINE: Hi! My name is Catherine Robson, and I manage a team of designers and front end developers at Red Hat. I have worked as an interaction designer, design strategist, and UX manager. Throughout my career, I have introduced user experience practices into many development teams and organizations and helped them achieve product goals in more user-centric ways.
TIFFANY: We don’t expect you to be experts in UX at the end of the presentation, but we hope that you will have some new strategies to try on your next project. I’m curious...how many of you are developers? Raise your hands. How many of you work with a user experience designer already?
CATHERINE: [Comment on the results] As a developer, it’s up to you to build these experiences. Even if it’s not your title, the responsibility for the end user’s experience is shared amongst all team members. You can use the tactics to make sure your users come back for more. Not everyone has access to a UX Designer. Sometimes it’s up to you alone to meet your user’s expectations, wants, and needs. We’re here to help you start on that path today.
TIFFANY: We don’t expect you to be experts in UX at the end of the presentation, but we hope that you will have some new strategies to try on your next project. I’m curious...how many of you are developers? Raise your hands. How many of you work with a user experience designer already?
CATHERINE: [Comment on the results] As a developer, it’s up to you to build these experiences. Even if it’s not your title, the responsibility for the end user’s experience is shared amongst all team members. You can use the tactics to make sure your users come back for more. Not everyone has access to a UX Designer. Sometimes it’s up to you alone to meet your user’s expectations, wants, and needs. We’re here to help you start on that path today.
TIFFANY: These are challenging goals to meet. The tactics we’re going to share with you today will help you make your screens organized, intuitive, and easy for your users to consume, which will help you meet these attention span goals.
TIFFANY: We have some time saved at the end of the presentation for any questions, so please save them until then. And if you don’t have any questions, that’s fine too, I know it’s the end of the day and many of you are probably pretty tired! Let’s get started with our first tactic!
Hosting receptions after the day is over...
CATHERINE: Cheryl is an example conference attendee. She’s quite social and likes to network at conferences to learn more than she would otherwise. So let’s think about how Fuddy would help Cheryl.
Transition:
CATHERINE - Ok, it’s time to start coding, right?
TIFFANY - Well, not exactly. How do you know what you’re going to build? You should think about your app in a more holistic view first and we have some tactics that are going to help you do that.
It’s time to do some brainstorming on how you can solve the problem. While you can do this in a document, I’ve found that having a meeting with a few key stakeholders is especially useful at this stage.
Which brings us to our next tactic, sketching.
TIFFANY - Sketching is one way to explore multiple design options. It’s quick and easy, as it requires no coding and it can be done in minutes or even seconds. You can do this on paper or preferably on a whiteboard when you have stakeholders present. At this stage, you’re only trying to figure out what the possibilities are and what are the most important things to include in your eventual solution. This process lets you also eliminate the “bad” options very quickly, and without having to do a single line of wasted code. It saves you time in the long run.
This isn’t like a multiple choice test, where you’re taught to go with your first answer, because that’s probably the right one. With sketching, you want to iterate on the design. Think of different and maybe even extreme ways to solve the problem. This is where having a whiteboard handy, is especially helpful. You can erase and redraw until you refine it to a point that you have agreement on the direction you’d like to go.
Another way to look at this is that you spend part of the time sketching different options and ideas and then you spend the rest of the time limiting those options and making choices about the direction of your solution. You may have seen something similar to this in the past referred to as Divergent and Convergent Thinking.
The terms were first coined by J. P. Guilford, an expert on creativity and President of the American Psychological Association.
One thing that holds a lot of people back from sketching, is that they think they have to have good handwriting or be good at drawing. You might think that your co-workers or stakeholders will judge you. (And the might!) But you should keep in mind that you don’t have to be an artist, as you will see by some of my quick sketches later in this presentation.
Sketching is one of those things that I’ve found that gets easier and easier to do as you do it more and more often. I’ve found that once you start doing it consistently, others often quickly jump in. That’s where it goes from “your” design to a more collaborative effort. And ultimately, you’ll find that it’s much easier to get approvals this way!
Catherine to take this slide?
If we go back to our Fuddy Example, here are two sketches we created while discussing what we could do to showcase existing restaurants for Cheryl to host her reception at. One shows a table view, and the other turns that table into a richer list view. Keep this in mind, we’ll come back to these soon!
Now that we’re starting to sketch pages, we’re well on our way to thinking about the design of our application. But Tiffany, how can I make sure that what I’m designing on the page actually meets the user’s needs and allows them to accomplish their goals?
During the sketching process, you will likely and naturally start sketching how the systems work together and where user input occurs.
Like sketching, task flows let you think through the design and possibilities for you solution. It provides you with a step-by-step map of how the user performs their task, from their perspective. It’s important to remember that it’s about the user here and not about the technology or system. While you may not be comfortable with sketching, anyone can create task flows. No art degree required!
One of benefits of task flows is that you can you show how the App would work for the user. This is a great tool to use in meetings as it gives stakeholders a high-level idea of what the user will do. You can make sure that everyone is on the same page and get approval or buy in to move forward with the solution.
So when’s the best time to do a task flow or flows? Well, you definitely want to do it before any coding. You can use this tactic instead of or along with your sketching.
A good time to create task flows is after you’ve identified the user stories or once the primary user task is identified. This process helps you further flush out the requirements and could happen naturally in design meetings.
A good way to get started with task flows, is to think about how you would solve the problem if you didn’t have technology restrictions. How would the user complete this task in an ideal world?
Keep it simple at first and then get more detailed or add in additional flows as you encounter other related tasks or special cases.
Add actions to the arrows
Here are some other examples.
Here are some other examples.
Here are some other examples.
As you review and refine the task flow and start adding in your technology, you should keep that ideal task flow around as a guide. The real genius of this tactic is in optimizing the task. You should aim to reduce the number of steps for the task as much as possible and refer back to your ideal state.
Now we have our persona, user stories, sketches, and user flows. What else should we keep in mind when designing this application?
All information is treated equally, and users are not sure what to look at first.
For developers, it starts so innocently. “Oh, I just have a few fields, and an indeterminate amount of items coming back. Let me just put them in a table. It starts looking something like this on your laptop, and you think someone else will come along and change it later to be more useful.”
Then, things expand, and no one ever questioned what the user really needed from this data. Suddenly you have a massive table with too many columns, tons of “table features”, and no real way for users to understand them easily or know what is important. Your customers start saying they like your competitors, or they want your interface to be “more usable”.
You can use data tables when:
Query and manipulation of data is primary use case
All fields have same level of importance (importance might be based on unique user need/query)
Content is mostly numbers
Content is mostly for comparison or calculation
Interactive GDP chart can be found here: https://data.oecd.org/gdp/gross-domestic-product-gdp.htm
You can use data tables when:
Query and manipulation of data is primary use case
All fields have same level of importance (importance might be based on unique user need/query)
Content is mostly numbers
Content is mostly for comparison or calculation
Interactive GDP chart can be found here: https://data.oecd.org/gdp/gross-domestic-product-gdp.htm
Like Catherine talked about with data tables, your users should be able to quickly scan and locate information on the page or screen. As you move away from data tables, and start using lists (or other solutions?) more, you’ll need another tactic to accomplish this….whitespace, or sometimes referred to as negative space.
Whitespace is the amount of space or distance you have between the elements on your page or screen. It is often overlooked as many people like to focus on the colors or how it will work instead.
You don’t need to have everything crammed together. With the variety of mobile devices today, everything from smartphones, to tablets and everything in between, there is this shift in user preferences where they don’t care as much about scrolling anymore. It’s almost expected. Gone are the days where users wanted access to everything on one screen and you shouldn’t continue to do this. With adequate whitespace, you give your elements some breathing room and you have more balance on your page.
Whitespace also helps to improve readability. It also can help you emphasize certain areas of the page and convey content prioritization. In general, the more space given to an element, the more important it appears and the more likely your users will see it. Helps eye flow and you absorb more information.
Whitespace can be added in many different ways:
Space around graphics and imagesMargins, paddings and guttersLine-spacing and letter-spacing within text contentSpace between columns
Any type of blank space that isn't in competition with the focus content can be classed as "white space".
I’d assert that if If you take 10 minutes to test your application, you’ll save about 10 days of re-coding down the road.
Everyone knows the value of testing and it’s a great way to make sure your App is doing what it’s supposed to be doing.
However, one of the best useful parts of testing is getting feedback from your users.
While testing may be something you do occasionally, providing your users with a way or ways to provide feedback should be an ongoing practice.
You can do this a variety of ways, such as a google form, survey site, email, webforms, etc.
Think about the details you would need to be able to solve a bug or issue. What do you need to know to reproduce the issue? Try to include this as part of the feedback process so you don’t have to go back and forth with the user multiple times.
Don’t be afraid to have your feedback in a public place where people other than your internal team can access it. One of the main benefits of this is that you are less likely to get the same feedback from multiple people if they see that someone else already reported ths issue.
https://openshift.uservoice.com
Form - user view
http://developers.redhat.com/
This is what the back-end might look like, once the submissions are received.
https://github.com/patternfly/patternfly/issues/
Capture both bugs and feature requests in one place.
Even better, you could follow-up with the user directly to get more information about the issue.
Have someone contact the user directly if the issue is not clear.
We’ve shown you 7 tactics today. (Mention the value/benefit briefly.)
Any questions? We’ll also be available for a short time outside or you can visit the UX booth in the “atrium”. We have multiple UX activities and would love to have your feedback.