user interface Archives | Samantha Soper

Tag: user interface

The UX Researcher: Methodologies, Process, and Tools

June 19, 2017July 6, 2017
by Samantha Soper

What is a UX Researcher? Research is an integral part of the UX stack, but it often leaves beginners and hopefuls mystified. In an effort to demystify the role, I will provide a brief overview of the methodologies, processes, and tools of the UX Researcher.

Luckily for you, I know my limitations. Since my specialization is in UX design and UI development, my research knowledge is reactionary and observational, rooted in analyzing trends and identifying pain points. For this post, I collaborated with an expert UX researcher to make sure I am covering all the usability testing bases.

Methodologies of the UX Researcher

Brigitte A. McKay is a Michigan State University Ph.D. candidate studying consumer engagement. She’s also had professional experience in a UX researcher role with a specialization in consumer behavior. Her guidance really led me in writing this section. Furthermore, she added some great tools into my process toolboxes.

Keep in mind, these are simplified overviews of commonly-used UX research methodologies. The best researchers always do their own research, so look into some of these for yourself!

Card Sort

In a card sort, your participants organize and group information in a way that makes the most sense to them. You can do a physical card sort using index cards or post-its or a digital one using applications like xSort (Mac) or UXSort (Windows). Additionally, the sort can be administered individually or in a group setting. In an open card sort, participants are free to name their topic groupings. In a closed card sort, they are given pre-defined categories, in which to group topics. As a result, you can logically find out the best way to lay out web pages, organize categories, and plan out your navigation architecture.

For more information, Usability.gov has a great article detailing card sorting procedures, best practices, and tips.

Card Sort Methodology - Animated GIF by Samantha Soper

Desirability Study

The desirability study was birthed from a brainstorm session between usability practitioners at Microsoft. This is a quick and qualitative method, administered in-person or digitally, to gauge a user’s reaction to a product. The faces questionnaire and product reaction cards are two tools employed in this method. The faces questionnaire shows 6 subtly positive, negative, and neutral expressions with a Likert scale, upon which the user rates their emotional relatability. Product reaction cards are a set of 118 reaction words, like accessible, time-consuming, predictable, or fun, from which the user selects to describe a product or their feelings. Afterward, the user picks their top 5 cards and explains their choices. As a result of both tests, you’ve quickly obtained candid and accurate feedback about how a user might react to your product’s experience.

For more information, I suggest downloading the research paper (.doc) from Microsoft’s website. At only 5 pages, it’s a pretty quick read and you can get a decent understanding of the tests performed.

Desirability Study Methodology - Animated GIF by Samantha Soper

Design Studio

Probably anyone who’s had experience working for an agency or in-house creative team is familiar with this method. The design studio is a truly collaborative and iterative approach to UX research. This method has a 5 step process of illuminate, sketch, present, critique, and iterate. First, illumination gets everyone on the same page regarding the scope of a project and available opportunities. Then, the sketch phase has the team quickly getting their good (and bad) ideas out of their head and onto paper. Next, presentation involves participants sharing and selling their ideas, negotiating, and accepting changes. The critique enables constructive feedback and improvements through evaluation of the who, how, what, and why of the design. Finally, iteration involves skimming the top ideas and running them back through the sketch, presentation, and critique processes. In conclusion, you’ll end up with a solid concept which the entire team can feel invested in.

To learn more, check out User Interface Engineering’s Introduction to Design Studio Methodology.

Design Studio Methodology - Animated GIF by Samantha Soper

Usability Study

Usability studies are incredibly practical when it comes to evaluating user interaction. In this test, participants are given a series of tasks to perform on a site or application. Additionally, the researcher observes and takes notes on usability issues and user satisfaction. Learning if tasks can be performed, how long they take, and how they can be improved are just a few benefits of usability testing. The studies can be done in-person or online, as you’ll see in the Observation tools below. Once completed, you’ll have both quantitative and qualitative data about the usability and experience of your site.

If this piques your interest, take a look at Usability.gov’s overview of usability testing for more in-depth information. The links to important testing topics in this article are especially relevant.

Usability Study Methodology - Animated GIF by Samantha Soper

Survey

We’re all familiar with surveys. Put simply, it’s a series of questions aimed at getting user feedback. Seems easy enough, right? Wrong. If you haven’t taken statistics, I’m going to warn you that writing and administering a good survey is deceptively difficult. While I won’t go into them here, you need to watch out for multiple sampling biases and errors that can throw off your results. Regardless, surveys are also one of the best ways to quickly collect large amounts of data about your users. Setting a clear objective, deciding on a tactical or strategic approach, and omitting what is already known are just a few steps in planning a great survey.

If you’d like to try it out for yourself, the InVision Blog has a detailed post on quickly creating powerful surveys. Using their Lean Survey Canvas, you can generate your most effective survey and raise your response rate.

The UX Researcher’s Process

Anticipation

First, research the market conditions and user behaviors.

First of all, you need to plan. The best UX researcher may seem clairvoyant when they are actually just perceptive with an arsenal of resources. They benefit from existing studies, trend data, and an eye for inspiration. Additionally, the card sort, desirability study, design studio and survey methodologies, listed above, can be used to anticipate the user’s experience.

A toolbox to help anticipate user behaviors

SWOT Analysis — This classic marketing tool helps define market conditions and project scope. You gain a better understanding and focus, through evaluation of strengths, weaknesses, opportunities, and threats.
Google Trends — Find out what are users searching for and what topics are trending. This comes in handy for content strategy, SEO, and anticipating user desires.
Media Kits — If you’re working on an integrated marketing campaign, learn how to read media kits. Most media kits contain demographic information about the traffic that will be directed to your experience. To find a media kit, just Google the publisher, blog, or interactive ad space vendors’ name followed by “media kit.” For some examples, check out the media kits for BuzzFeed, TIME, Advertising Age, and Food Network.
UX/Design Best Practices — Due to the dynamic nature of the web, you should stay fresh on best practices. Google “UX best practices” and “[e-commerce, app, blog, etc.] design best practices” with the year when you start planning a new experience. In addition, yearly best practice infographics are all over Pinterest.
Competitive Analysis — Good thing you outlined your competitors (threats) in your SWOT analysis. Before you start, it’s always best to compare and evaluate what competitors are doing. From layouts to new features to differentiation, you can learn a lot from your competition’s experience.
Inspiration — Let the best of the best inspire your UX. Sites like Awwwards, Muzli, Creative Bloq, Webdesign Inspiration, and Collect UI are just a few of the plethora of inspiration sources on the web. You can also find inspiration browsing Reddit, Medium, Pinterest, and Tumblr.
White Papers — Bigger companies with bigger budgets are always doing big research. Primarily, white papers are published to help companies collect emails and sell their product. Consequently, you can also use this free research to support your UX strategy.

Reaction

Next, watch for red flags to make adjustments for the user.

Sometimes, even after all of your planning, your user can’t get to a page or isn’t using it as expected. Thankfully, there are a ton of tools out there that make reacting to your user quick and easy. You just need to know how to use them and what to look out for.

React to your user with these tools

Google Analytics — When you are reacting to traffic issues, you need to pay attention to bounce rates, exit rates, 404 pages, and referral errors. You can find issues with site speed, device rendering, cross-browser compatibility, dead links, and international laws. While it’s geared for e-comm, ConversionXL has a list of 10 reports that can help any site recognize and combat bugs and UX issues.
Google Search Console — Crawl errors can cause major search issues and potentially drive users away from your site. You can quickly find out anything from traffic-based server issues to users navigating to a page that should’ve been redirected. Google’s article on the different types of crawl errors is especially relevant.
SEOMoz — This suite of free and premium SEO tools monitors the value of your pages. The MozBar Chrome Extension delivers on-page metrics and SEO evaluation. With this tool, you can fix search result red flags and verify markup, like OpenGraph or Twitter Cards, for a more cohesive omnichannel experience. Open Site Explorer shows you inbound links, anchor text (keywords), and top pages for any URL. Because you find out which pages are getting the most traction from which sites, you can understand your user better and personalize those experiences.
Heat Maps — Discover how people are using your site. Heat maps tell you where they are clicking, how they are scrolling, and where their cursor moves. Is a button getting fewer clicks than expected? Heat Map apps, like HotJar and Gemius HeatMap, tell you where the user is distracted.

Observation

Finally, observe interactions to learn more about the user.

After you’ve reacted to your issues, it’s time to observe user interactions and try something new. Observation is the nitty-gritty of the UX researcher role. Watching users and running experiments teaches you so much. In addition, the last two UX research methodologies, usability studies and surveys, are a huge part of this stage.

Tools to observe your user’s behavior

Google Analytics — During the observation stage, this tool helps you answer a couple of age-old questions: “Where did they come from?” and “Where did they go?” Focus on traffic acquisition, user behavior, user flow, and exit pages and learn more about your user. Additionally, user demographics, interests, and cohorts are a few more incredibly useful metrics.
A/B Testing — One of the most conclusive UX experiment tools compares two variations of a user experience on your live audience. Try out different colors, designs, layouts, and much more. Since you’ll know exactly what has the best click-through, engagement, or conversion, data will drive your UX decisions. Optimizely, a leading A/B testing SaaS, has a wealth of e-books, white papers, and webinars to help you learn the best ways to plan and execute your A/B test.
Usability Testing — As discussed in the methodologies section, usability testing will give you qualitative and quantitative data about your user experience. Using remote applications, like User Testing and Loop11, is the easiest solution, because you don’t have to source a test audience. If you’re into DIY, screen capture applications like TechSmith’s Morae Suite, SnagIt and WebEx Recorder, can record on-screen interactions for in-house usability testing.

In conclusion, I hope I have given you a little insight into the world of the UX Researcher. Since this discipline is great for anyone with an exploratory mind, tell me what other tools you’ve discovered. Questions and comments are also welcome, same as always!

If you’re interested in more UX, maybe you’d like to check out my post on how to become a UX designer. I share some tips and insights from my experience in the field.

Tips and Tricks

How to Become a UX Designer: Tips from my…

April 27, 2017April 27, 2017
by Samantha Soper

So, you want to learn how to become a UX designer? Designer Alexis Delafose was wondering just that and hit me up to find out my story.

“Hey Samantha! I moved to Austin about two months ago hoping to find a job as a graphic designer (still looking) because that’s what my professional experience has been leaning towards, but I’ve developed an interest in UX design. So for all the UX designers, could you tell me about your career journey towards becoming a UX designer, some general qualifications or knowledge I would need as UX designer, and maybe list some helpful learning resources (not classes, but books, blogs, podcasts, etc)? I can and will google all of these things, of course, but I’d really value the voices of some fellow Austinites. Thanks!”

Smart thinking, Alexis! Targeting local UX folks to find out their journey is a great networking tactic and you’ll learn about the industry in your area.

My Career Journey

To be honest, my journey into UX is a little too TL;DR for this post, because it started when I was 12. If you’re interested in my story and the path that led me to UX, I’ll be writing a follow-up post covering my history on the web.

My Tips on How to Become a UX Designer

Please remember, I am speaking from my own personal experience and what I felt gave me a competitive edge. I’m not saying this is a secret formula on how to become a UX designer. The job itself, as with most tech jobs, is in a state of constant flux due to the speed of innovation.

General Qualifications

Know how things are coded.

Understanding databases and programming logic make a huge difference in effective UX wireframing. You can confidently pitch your ideas knowing the developers will be able to deliver on it. It helps you set appropriate expectations for your less tech-savvy clients and clearly explain your ideas to the back-end developers. Also, you can build out your ideas yourself, making you more valuable in a staffing shortage.

A love for (or, at least, understanding of) persuasive writing comes in very handy.

A majority of my opportunities have involved convincing people to let me do things. Similarly, much of UX design involves backing up your ideas with solid research, then presenting that data in a way anyone can understand. After all, what is a UX designer without the ability to translate their own ideas (experience) to their own clients (users)?

The biggest takeaway from persuasive writing is the analysis and research involved. You don’t just pose an idea and expect people to take your word on it. You evaluate other options, find supporting evidence, and perform statistical analysis. Sometimes, you even prove yourself wrong. When you can be confident in your ideas, people are much more likely to trust you to execute them.

Freelance your face off.

There are droves of clients on Craigslist looking for help with their website for cheap. Most importantly, freelancing helps you start building your network. Additionally, for the lower cost, clients are usually more accepting of slower speeds, as long as you set appropriate expectations. Double or triple your time estimated to leave room for inexperience. Managed expectations create a better experience for your client, so they will help you build awareness via word-of-mouth.

Working with freelance clients gives you a legitimate project to focus on and actual deadlines to meet. You also benefit from a little more creative flexibility, because you’re usually working to please one person. Pitching ideas, knowing your time constraints, understanding clients’ desires, and performing market analysis are integral in learning how to become a UX designer.

Keep your ego in check.

In most companies, there are always specialists that know more than you. They don’t know you and don’t have reason to trust what you think you know. Over time and demonstrated effort, people will respect you and what knowledge you do have. There is no substitute for experience.

Be your own devil’s advocate and question everything you do. You are going to be frustrated with people questioning you constantly. While it is your job to push the envelope, allowing your ego to take over the pushing does not help people feel comfortable working with you. The more empathetic you are to common fears or concerns of clients or other coworkers, the better you will be at building trust in these interactions. Better empathy makes for a better UX designer.

Always learn.

The network of experience touchpoints is constantly expanding. It is super difficult to keep up, especially if you are not teaching yourself constantly. If you’re just starting out, don’t be afraid to dive in. If it feels overwhelming, don’t be afraid. You’re not alone. How you’re feeling looking at UX design as a whole is how I feel taking my first steps into creating AR/VR experiences. Once I cross that foothill, there will be another mountain to climb. The constant evolution keeps things exciting.

Build or plan out some web applications for yourself. Practice sketching or teach yourself new applications or languages in your free time. For example, coding a grocery list that my partner and I could use on the web helped me learn PHP and mySQL. Soon, I will recode it in another language to learn that. Never stop learning and creating.

Practice for speed.

One of the biggest hurdles I had coming up in my career was my speed. I’d always placed quality at the utmost importance, as designers will do. Initially going into the working world, I was not prepared for the speed of conception and execution. The ability to speed-sketch or wireframe on the fly is especially relevant for communicating your ideas.

Producing quality work quickly takes a lot of practice. Don’t sacrifice quality for quantity, but don’t expect an employer to not want both. Practice is an essential part of learning how to become a UX designer. The more you create, the faster you become.

Knowledge

Mandatory:

Adobe Illustrator and Photoshop
HTML and CSS
jQuery and jQuery UI
Google Analytics
SEO Best Practices and Tools
A/B Testing
Wireframing
Responsive design

Ideal:

The full Adobe Creative Suite — InDesign is for print. Dreamweaver is still not better than handwriting your code. Flash is quickly dying. Employers are still looking for these skills, so they are still good to know.
Javascript — Employers are definitely looking for UX designers with Javascript experience, especially with Angular, React, or Node.
Git or SVN — Many companies use a version control system for effective code collaboration between different departments.
LESS or Sass — These CSS preprocessors are all over UX designer job descriptions. They are very similar to CSS but allow for logic structures and variables.
Prototyping with InVision or Sketch — These applications make prototyping faster and easier, so many employers are looking for these skills.
Drupal, WordPress, or Joomla — Content management systems (CMS) are widely used and very much requested on job descriptions.

What I’m currently learning:

Blender — Massive open-source 3D creation software.
Angular — A Javascript framework for building dynamic user interfaces.
InVision — Web-based prototyping software. I can already see their Moodboards replacing some of the Pinterest boards I’ve been collecting UX stuff on for years.

A Few Resources

I have several other posts in the drafts queue covering topics like teaching yourself to code and toolboxes for different web languages. I’ll throw you a few of those links to get you started.

Blogs

InVision Blog (the UI/UX section, particularly)
The UX Blog (He has podcasts, too!)
Smashing Magazine
A List Apart

Reference and Tutorial Sites

Finally, I should mention that UX designer is not an entry level position. While you’re still learning how to become a UX designer, take a graphic, web, or interactive designer job. Working with a company that will support your learning and will allow lateral movement would be an ideal scenario. Regardless, if you want it, you still need to work for it in your free time. Hard work pays off, but you have to have patience.

In conclusion, I hope this is enough to get you started on learning how to become a UX designer. Have some additional questions or concerns? Leave them in the comments below, or take a note from Alexis and hit me up on my Facebook page!

Tips and Tricks

CSS Beginner Tips: 6 Time-Savers

February 24, 2017June 15, 2017
by Samantha Soper

When I was first learning, a simple list of CSS beginner tips would have made my life so much easier. While it is an easy-to-learn language, there are a ton of little tricks that you need to know beyond the language and syntax. Several advancements have also been made to improve the language over the years.

Consequently, I was only able to learn these nuances and improvements through years of trial and error. To save my CSS beginners time, here’s the list of CSS questions and answers that I wish existed when I was starting out.

6 Time-Saving CSS Beginner Tips

Why aren’t width and height working?

You set your width and height with CSS and your element won’t resize.

I’ve noticed a lot of CSS beginner tips or tutorials are missing one very important declaration with their lessons on width and height. Furthermore, I’ve seen several novices overlook this when they are asking me for help troubleshooting their code.

If you’re width and height aren’t working, there is a super simple solution.

.container {
    display: block;
    width: 80%;
    height: 100%;
}

That’s it. The element just needs to have a block or inline-block display declaration set. You can check out the article on displays at W3Schools to explore the wide variety of options available.

How do I center align a container?

Now that you know how to properly set your page container width, you might notice that your content is hugging the left-hand side of the page. You want it to be centered, but text-align: center; isn’t centering the content correctly.

.container {
    display: block;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

The value of auto calculates and sets your margins based upon your element’s size and its container’s size, automatically. Unfortunately, this does not work for vertical alignment, but there is a really handy guide to centering on CSS-Tricks to help you out there.

Can I absolute position an element within a container, instead of the browser window?

You may know about absolute positioning and how useful it might be to place elements exactly where you want them on the page.

If you use absolute positioning alone, you’re only experiencing half of its usefulness. Wrapping an absolute positioned element in a relative positioned container positions that element within its container.

.container {
    /* Previous styles */
    position: relative;
}

.element {
    display: block;
    width: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

The position property has several different values to explore. For an expanded overview, I’d suggest looking at the positioning tutorial at W3Schools.

Why does the container get bigger when I add padding?

You’d think since the padding is set to add space within an element, that it would respect the width and height declarations placed on that element.

Unfortunately, that is not the case. Adding padding without adjusting the width or height to “make room” for it can really mess up your layout, especially if you have side-by-side elements.

As a result, CSS3 introduced box-sizing to solve the discrepancy between the way padding works and the developers’ expectations.

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

The code above is a fix-all that is great for when you are starting a new project. If you’re modifying an older template (where a fix-all may cause issues), you can just add the declaration directly to your element or class. CSS-Tricks has a great history on box-sizing, if you want to learn more.

How do I make the background semi-transparent and the text opaque?

A dark or light translucent block over an image is a subtle way to make headlines or text blocks more legible.

If you’re a beginner, you may find the opacity CSS attribute and end your search. You apply opacity: 0.3; to your container. Immediately, you realize everything within the container is at 30% opacity, negating the legibility effect you were trying to achieve.

It wasn’t until CSS3 that RGBA was added as a legal color format. Take advantage of this alpha channel anywhere you’d normally use a hex code.

.container {
    /* Previous styles */
    background-image: url('bg-image.jpg');
}

.element {
    background: rgba(0,0,0,0.3);
    color: rgb(255,255,255);
}

Furthermore, RGBA is not your only option. W3Schools has a full run-down on the all the legal color values you can use in your CSS.

How can I code and debug CSS faster?

If you think memorizing the entire library of CSS attributes is the key to faster development, stop. I’ve been doing this for over 10 years and still use Google to double-check syntax sometimes. You only need to memorize what you use the most.

Your in-browser developer tool is fundamental for faster CSS coding and troubleshooting. This is the most important of all my CSS beginner tips. Honestly, it’s too important to add on as a cursory note in this post, so check out the deep-dive in my developer tools article.

In conclusion, I hope these tips help some apprentice devs avoid hours of trial and error. Since I am writing from my own experience, I’d love to hear your mind-blowing discoveries from when you were just starting out.

Do you have any CSS beginner tips that made your coding faster and easier? If you’re experienced, what do you notice junior coders overlooking when you troubleshoot their CSS? Share your favorite tips in the comments section below.

Tips and Tricks

Developer Tools: The Key to Speedy CSS

February 23, 2017August 24, 2017
by Samantha Soper

Ask any front-end developer. In-browser developer tools are the key to speedy development and debugging. Additionally, they’re useful for HTML, Javascript, and many other languages. I’ll focus on the CSS benefits today.

With the right dev tools, you can modify CSS and preview your changes in real-time before you commit them to your CSS file. This shaves time off of swapping applications, uploading, and refreshing. Finally, no more stabbing around in the dark to figure out what will fix your issue! They also allow for pixel-perfect absolute positioning, as you can see exactly where you are moving an element.

Browser Basics

Throughout my time developing, I’ve found that Chrome and Safari are consistently the most accurate for cross-browser compatibility. Across operating systems, Chrome is probably the most popular because Google knows what they are doing.

If you are using Firefox, upgrade to Chrome.

If you’re using Internet Explorer, have you considered that you’re maybe not ready for web development? I joke, but seriously, you need to use a better browser. Later versions have been more W3-compliant, but it’s a tool best saved for compatibility testing.

Consequently, using the right browser can save you a ton of time in your cross-browser testing. A bad browser will leave you struggling to get your code to play nice. Your page will not render correctly in standards-compliant browsers and it’ll increase load time.

Dive in with Developer Tools

Chrome DevTools

To setup DevTools in Chrome, check out the DevTool docs.

If you’ve never done CSS troubleshooting in-browser, Google has set up a great article detailing how to use Chrome DevTools to inspect and edit your pages and styles.

Most importantly, Device Mode is BAE. It’s Chrome’s emulator for mobile and tablet devices. It is always best to compatibility test on an actual device, but Device Mode is a great supplement to standard QC.

Safari Web Inspector

To setup Web Inspector in Safari or iOS, check out the Safari Web Inspector Guide. This article also contains information to help familiarize yourself with the interface.

The main benefit to using Web Inspector is the ability to inspect and adjust elements on an actual iOS device connected to your computer. Sometimes device emulators don’t always show the same issues visible on the actual device. Web Inspector on iOS Safari makes resolving issues on Apple devices easier.

Tips for Speedy CSS with Developer Tools

Double-click on any code in the elements or styles panel to update HTML or CSS.
If a style isn’t adjusting through your tools, try applying it to the element’s HTML parent.
A scroll through the styles panel will show you other CSS impacting an element, in case something is overwriting your change.
Hover over an HTML element with the inspector cursor or in the code panel. It’ll highlight the element and tell you the size.
Psuedo-classes (like :hover) can be toggled on and off through the styles panel, so you can easily style your links and menus.
Impress your friends by sending them screenshots of wacky celebrity tweets that you’ve changed the HTML text on. (Don’t believe everything you see on the internet, kids.)

In conclusion, developer tools are your most important asset for speedy front-end dev. You make the most of your CSS code when you use these tools and do so quickly. If you are trying to learn front-end and don’t use them, you’re just going to give yourself a migraine.

I feel like dev tools are paramount, but you tell me: are there any other CSS tools you can’t live without? Empty your toolbox in the comments below.

Like what you see?

Contact me