CareerFoundry webinars cover the latest trends in tech, with a focus on UX design, UI design, web development, and app development. Each webinar is presented by an industry expert, and followed by an exciting Q&A discussion.
In this webinar, Hannah Alvarez, the lead content strategist at UserTesting discusses how to design your user interface to maximize user satisfaction. This webinar is a must-see for anyone considering becoming a UX designer, and gives valuable insights for anyone involved in creating content for the web.
The webinar ‘Human-Centered UI – Designing Useful, Usable Interfaces’ took place on Tuesday, September 13th and was presented by Hannah Alvarez, lead content strategist at UserTesting. She covered:
- How your font, color, and icon decisions impact your product’s usability
- How to start making more user-friendly design choices
- How user feedback can help you perfect your interface designs
If you scroll down, you can read a transcript of the Q&A session with Hannah. Enjoy!
Q&A transcript
HANNAH: Okay, so let’s open it up to questions. Ryan, do you have anything for me?
RYAN: Yes, I’ve got quite a few good ones. First one was towards the beginning: What font size would you normally use on mobile?
HANNAH: 16pt is kind of a standard. It just seems like that is more commonly used nowadays. I think that that is also kind of subjective, and so like don’t take that as gospel truth. Experiment, see what that looks like within your interface. Maybe for some design… Some interface elements, you know, maybe for like a button or something that’s going to be way too large and if you have a product that’s used across different platforms, maybe one size fits all is not going to be best for you. So maybe plug 16 in if you are just looking for a starting place, but then experiment. See what works, see what looks good, see, if it’s easy to read in different environments and go from there.
RYAN: Perfect and going down a similar path, how do you design for people with disabilities like color blindness or maybe if they’re older, and they can’t see 16 point for example?
HANNAH: Yes, absolutely. So luckily today’s technology whether you’re using iOS or Android there’s a lot of accessibility features built in. So take a deep breath, you don’t have to cover every single aspect of accessibility within your product. Right, people who have trouble reading smaller fonts they can set up their phone to increase their font size. People who have visual impairments they can set up their phone to, you know, use screen reading software. So the pressure is not all on you. There’s lots of good tools out there for accessibility that are just built into every phone these days.
But a couple of things to keep in mind for better accessibility, especially for color blindness is contrast, high contrast is better. You know if you’re to imagine a piece of copy that’s grey on a background that’s a lighter grey that’s going to be a little bit muddier, that’s going to be a little bit more difficult to see.
Or, you know, if we’re to go on the color spectrum and say oh it’s the holidays, we’re going to start using some festive colors, let’s put some red copy on a green background but you don’t have a high value contrast, meaning that the values are kind of similar, maybe they’re both like a medium brightness green and a medium brightness red, that’s going to be a lot more difficult to see for a user with color blindness. So increase your contrast. If you’re going to use green on red use a really dark green on a really pale red or vice versa. Use a deep burgundy on a sage or something. So even if people can’t make out the hue difference they’ll actually be able to see what’s on the screen because of the value difference.
I would also even consider, you know, if you have access to it find people who have different levels of ability. So if you have, you know, friends and family or people that you can recruit online to give your product a quick look-see who are maybe older or use glasses or use screen reader software, go seek those people out.
Don’t be afraid and think like, oh I’m going to offend them by asking. No, they want to help you build products that help them. So get to know those people, have conversations with them and see, you know, what frustrates them, what aspects of technology really enable them to do things that they might not be able to do otherwise.
RYAN: Thank you. Rania has an interesting question, but the PDF I’m going to give out in just about 20 minutes will help you out as well. He says do you know the most interesting book to read up on UI, to maybe learn some more. Then he had a follow up question, who are your inspiring designers that you follow?
HANNAH: Oh, let’s see. The most interesting book that I have read recently that I can’t recommend enough, it’s actually less about UI specifically and more about kind of UX and just product design and user empathy in general. It’s called Design For Real Life and it’s by Sara Wachter-Boettcher and one other person whose name I’m totally blanking on because I don’t have it in front of me.
But look up Design For Real Life. It’s really about building empathy for your users and, you know, people hear that word empathy and they think oh that’s kind of touchy feely, I have a job to do, I need to get my work done, I’m just going to do what I’m going to do.
But they put it in a really, really practical sense of thinking forward to how people are actually going to interact with your product and the mind-set that they’re going to be in and maybe their real environment right, so people aren’t always focussed 100% on your product and they’re not absorbing every single word and every single pixel.
They’re kind of all over the place. Maybe they’re interacting with your product while they’re on the train or in a noisy place or in a café or maybe they’ve got three kids that they’re taking care of and they’re running around and they’re doing all these different things.
So this book really reminds you to kind of research that and take that into account when you’re creating your designs because real life is not the same as a usability lab and real life is messy and your product still needs to account for that or again, you know, you’re going to go out of business.
So I highly recommend that, and I think that’s probably the thing that’s got me the most excited right now is, you know, designers who are really weaving empathy into everything they do. It sounds like a buzz word.
I know that it’s kind of overused a little bit right now, but I think it’s a big shift in the way that companies are doing business and in the way that designers are creating products is really putting their users first and really starting from a place of wanting to provide value, wanting to make things easier. That’s really going to be more of the basis for competition than just features alone.
RYAN: Can you say the name of the book one more time?
HANNAH: Yes, Design For Real Life. It has two authors. One of them is Sara Wachter-Boettcher and the other one is a gentleman whose name I’ve completely forgotten and I apologize.
RYAN: Do you start designing for desktop or mobile first?
HANNAH: I think that it very much depends on your product. You know, everyone’s super into mobile first. For a lot of products that’s the right way to go because, you know, almost everyone uses a Smartphone, at least the people who are going to be in our target market are using a Smartphone.
It really forces you to think minimally and then add as you go, instead of thinking expansively and then having to condense. So that’s a great starting place for products that are going to be used either predominantly on mobile or across multiple devices.
However I think that’s not always like a one size fits all, you know, everybody always needs to be designing first. So if we’re thinking about like enterprise software, right, Ryan and I were chatting about Marketo earlier, a product that is going to be predominantly used in a workplace, at a desktop computer.
You know, your Marketos, your SalesForces, your Pardots, those kind of companies of the world. While they might have needs for mobile products, those mobile products are probably going to be pretty different and their primary purpose, their primary product is going to be desktop.
So it doesn’t really make sense to design, you know, an expansive, you know, database or something that’s exclusively going to be used by business people sitting at desks for mobile first, right.
So, you know, take that for what it’s worth but think about the primary use case of your product and if you’re not sure talk to your users. It really comes down to that.
RYAN: Okay, thank you. How do you demonstrate the usability of a design and a portfolio when you can’t reach the users?
HANNAH: Okay. Let’s see. I would… Well, I always jump to remote usability testing where you’re going to get a video of the screen of the person who’s interacting with the product and they’re kind of speaking their thoughts aloud as they go.
So you can take those videos, you can reduce them into little clips that illustrate, you know, the high points and the low points and just add those into, you know, your deck, your presentation, whatever it is that you want to show in your portfolio.
But if you don’t have that, one thing that I think is really fun is to do kind of a walk-through of the user experience. So you would go screen by screen and just have a little call out box that’s there in your presentation that says here’s the action the user is going to take and maybe you can even add some little notes about their mind-set or their worries or their concerns or what’s probably going through their head.
And so then as you go screen by screen you’re illustrating how you’re addressing all of those concerns and so even though it’s not like a, oh look at my shiny report card, this product is so usable, you’re really going to illustrate how you’ve taken all of those usability concerns into account throughout your design.
RYAN: Talking a little bit more about usability, you talked a little bit about watching people use the app and like seeing the visual stuff and then also their feedback. Which do you find more valuable, especially since somebody might give you feedback that’s more positive than what they actually think?
HANNAH: Oh, yes you absolutely can’t have one without the other. I think that it is equally important and crucial to watch what users are doing and listen to what they’re saying because when you’re listening to what they’re saying you’re getting a window into their conscious mind with all of its biases and all of its distractions, you know, you’re going to be able to pick up their tone of voice.
So maybe you hear some uncertainty in their voice that you don’t actually hear in their words when you hear them pause or hesitate or make little, you know, sort of verbal… You know, if they say mmn or if they say ooh, those kind of things are really important to listen to.
But you can’t rely on that alone because, you know, sometimes it’s amazing how often people will get confused but not feel confused, right, and so they take a wrong path but they feel like they’re on the right path.
And so they might say this is super easy, I totally understand, I’m in the right place, I’m filling out this form, I did everything right, but then when you’re actually looking at their screen you see they’re in completely the wrong place and they’re filling out the wrong form and they filled it out incorrectly and they’ve done everything totally backwards.
So in a case like that, you know, seeing only the screen or hearing only the thoughts and feelings of the person wouldn’t give you the full picture.
So I would definitely encourage you to watch and listen and in addition to that use your analytics as well. So if you’re working on a product that’s live and you can actually, you know, dig into your analytics and see places where people are confused, where it’s really clear that people are exiting a screen or bouncing from a page or not converting in the way that you want them to, you can really kind of pinpoint those areas.
So it’s a combination of the analytics and the what is happening with the visuals of how are they getting there and, you know, the verbals of what’s going on in their head as they’re going through the process.
I know that sounds like a lot, but once you get into the process of making research and observing users like a part of your life, it’s a ton of fun, you’re going to learn so much, like don’t be intimidated to jump in and do it.
RYAN: Nice. Going back to one of your previous questions, Brian here answered and said that Eric Meyer is the other author.
HANNAH: Thank you, Eric Meyer. Yes, you’re so right.
RYAN: And another user here got a link to the actual book on Amazon, so I’ll send that to everybody in just a second.
HANNAH: Oh, fantastic.
RYAN: But as I look for that, I’ll go onto the next question. Would you recommend starting off in UI in an office job or as a freelancer? Is freelance friendly for beginners?
HANNAH: Oh that is actually something that I don’t have a lot of expertise in, but what I have heard recommendations for is, if you start working in an office maybe that’s not your ideal outcome.
Maybe you want to have a little bit more flexibility or more creativity, but you’re really going to learn a lot from your colleagues.
So as a freelancer, you know, if you start your career as a freelancer you’re kind of operating in an echo chamber. So I think most of the successful designers who have had fulfilling careers who I’ve talked with, they’ve, you know, taken multiple jobs with different companies, they’ve learnt different things from their colleagues at different companies and they’ve kind of built up their confidence as a designer, they’ve become familiar with different tools that different companies use. You’re not always going to have the same like toolkit at every job you work with.
So you’re going to learn a little bit more about your preferences, you’re going to learn a little bit more about best practices from people who have been there. And then once you’re… You know, once you’re at a place where you feel confident striking out on your own you’re going to have not only the skills and the network but also kind of the business savvy to really make a successful freelance career.
Take that for what it’s worth. I’m not a freelancer, so I don’t have personal experience with that. That’s just sort of the recommendations I’ve heard from other folks who have done that.
RYAN: Yes, freelance is sometimes amazing and sometimes very stressful depending on who you are and the clients that you have at the moment…
HANNAH: Sure, absolutely. It can be really difficult to build up your user base if you don’t already have a network in place and it can be a lot easier to build that network, you know, if you have a bunch of colleagues at a company.
And, you know, if you’re working for different companies you can really kind of learn, maybe go work for a small company and then go work for a bigger company and then kind of get a sense for, you know, how their processes work and how, you know, maybe they have a very collaborative design team and you’re working really closely with your product manager and your engineers and your UX person and you’re really kind of like bouncing a lot of ideas around.
And then maybe you’ll go work for another company where everybody is super siloed and you’ll get to find out what you like and don’t like. So, you know, even though it might not be the best years of your life working for the man or whatever, I think it’s probably a good experience to have to kind of build-up that confidence and those connections that you’re going to need to be a successful freelancer.
RYAN: There’s a lot of ticks. Going into the next one, how important is it to have coding experience in UI design? Apparently now the jobs out there require it?
HANNAH: You know, yeah, I think that there is this kind of obsession, especially in Silicon Valley with the unicorn, right, the mythical person who can do it all, they can UI, they can do graphic design, they can do UX, they can do research, they can do coding, everything. So I think that when you’re first starting out you do kind of want a broader skill set, so you want some basic familiarity if you need to do a little bit of coding to get your job done, you know, you can get there and kind of hack your way around.
I am absolutely not a coder, but I do know, you know, just like enough to kind of enable things if absolutely necessary. So having just very, very basic proficiency, sure great, why not do it.
There’s lots of good resources online. I’m sure that CareerFoundry has some really good resources for you if you want to learn just enough to get by. But don’t get hung up on being amazing at everything, right. It’s just not going to happen. You’re not going to be perfect at everything.
So do find a thing that you like to do and if that’s UI – focus on UI and, you know, have enough skills in other fields that you can be helpful, you know, if your colleagues need you to pitch in for something.
But I wouldn’t say like I feel like sometimes newer designers get like paralysed with fear of like I’m never going to get a job because I don’t have all of these skills. I do know for a fact that a lot of jobs, you know, when they’re posting their job openings they’ll kind of overstate the requirements a little bit.
So if you think if there’s a job you really want but you think like oh, I don’t actually enough coding for this, don’t be shy about applying for it. You know the worst they can say is no or the worst they can do I guess is take you through a lengthy interview process and say no rudely. But still, you know, get yourself out there. Don’t be afraid to apply for positions just because you think your coding skills aren’t up to par.
RYAN: When you say your coding skills, what languages? Are you talking CSS and HTML or other stuff?
HANNAH: Oh gosh, I think that CSS and HTML are probably, you know, the basics that you would want to know. I don’t think that you need to, you know, be like a Ruby engineer to get a UI job, you know. A little bit of HTML, a little bit of CSS you can probably kind of, you know, be as effective as needed, right.
RYAN: Yeah. Well I think we’ve got time for two more little quick ones. So Anna here says is it good idea to co-create with a customer?
HANNAH: Oh, that’s a great question. I think the answer is “really disappointing sometimes.” I think that to some extent getting customers involved, you know, taking customer suggestions to heart, maybe having a series of interviews with customers throughout your development process, that can be hugely useful.
But if you are, you know, so hung up on creating exactly what a customer wants, you might be losing sight of the bigger picture, which is what would be good for your user base at large. So I think it kind of depends on the project, right. If it’s like a special feature that would help one customer it’s going to take a really short amount of time, great jump into it, do it, but I would caution against making that like your MO.
RYAN: Makes sense. Think more about more people instead of just the one. Last question is here from Jonathan. How do you stay current?
HANNAH: Oh, read as much as you can. I am super addicted to Medium, so there’s lots and lots of good design advice out there on Medium. You know, Twitter I know there’s a lot of noise but you can follow some interesting designers on Twitter. If I had my Twitter in front of me I would give you some recommendations, but I’m drawing a blank at the moment.
I would also say get involved with meet ups. Find, you know, your local community who’s going to have, you know, maybe… I know in San Francisco for example, I used to work in San Francisco and I would go to UX night which is a really fun meet up, you get to meet a lot of cool people, there’s lots of different speakers and different topics and you get to kind of mix and mingle. It can be a really casual and fun way to hear what other people are doing and get some advice and talk shop without having to go to like a formal conference, you know what I mean.
So find some casual meet ups. Get to know your local community and just, you know, be friendly, ask questions, find out what people are working on, what tools they’re using. I think that that is just as important as, you know, formal education. It’s just finding out what people are doing in their life and in their work.
RYAN: Yes, absolutely. Well I think that’s all the time we got. Now it’s a minute past the hour. So thank you very much Hannah for coming in and sharing all that stuff with us. This has been great.
HANNAH: Yes, my pleasure. Thanks everybody for joining. I really appreciate it.
RYAN: Yes, you had a lot of good stuff. So I think I speak for everyone, thank you very much for coming in. Even I think I learnt a lot from this too, so thanks.
HANNAH: Absolutely, you’re welcome.
Did you enjoy this article? You might find these interesting: