The post The UX Researcher: Methodologies, Process, and Tools appeared first on Samantha Soper.
]]>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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
The post The UX Researcher: Methodologies, Process, and Tools appeared first on Samantha Soper.
]]>The post How to Become a UX Designer: Tips from my Experience appeared first on Samantha Soper.
]]>“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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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!
The post How to Become a UX Designer: Tips from my Experience appeared first on Samantha Soper.
]]>The post CSS Beginner Tips: 6 Time-Savers appeared first on Samantha Soper.
]]>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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The post CSS Beginner Tips: 6 Time-Savers appeared first on Samantha Soper.
]]>The post Developer Tools: The Key to Speedy CSS appeared first on Samantha Soper.
]]>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.
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.
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.
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.
:hover
) can be toggled on and off through the styles panel, so you can easily style your links and menus.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.
The post Developer Tools: The Key to Speedy CSS appeared first on Samantha Soper.
]]>The post Free Textures & Patterns: 5 Freesources appeared first on Samantha Soper.
]]>Lost & Taken is a beautifully visual texture photography library. This freesource showcases textures from contributing photographers, organized into simple categories. They also have the option to download their full texture package to add to Photoshop. These textures aren’t seamless, so they are best used full resolution as a background. To support the longevity of the site, you can make an optional donation on each texture.
Wild Textures is an expansive library or free textures and patterns. First of all, the library is run by one cool designer and photographer named Tomasz Grabowiecki. In the true spirit of open source altruism, he hosts the library to showcase his photography and made it free-to-use for private and commercial projects. The interface is easy to use, with options to filter by category or color and a tag-based search feature. Additionally, he displays each texture in real-world samples, including several 3D mapping and background applications. He also has seamless textures and patterns available! If you use his work, be excellent to him and share his site.
Subtle Patterns is a library of skillfully designed and subtle seamless patterns. Atle Mo, an interaction designer from Oslo, created and carefully curates this library. Patterns can be displayed in list or grid layout and finding what you want is easy with the tag-based search tool. While you can download single patterns in PNG or GIF format for free, a comprehensive Photoshop plugin is also available for $17.99 to support his efforts.
Pattern8, created by John Rawsterne, is a large collection of seamless patterns. First of all, the site has the holidays covered with many festive options. For everyday designing, there are also many beautifully intricate patterns. Additionally, several patterns have a link to his blog, PatternHead.com, where vector EPS files are available. Pattern8 features a convenient search by color and tag-based search tool, since it was built to better organize offerings on the PatternHead blog. If you like his work, you can donate to show some love.
Tim Holman and Claudio Guglieri created The Amazing Pattern Library, an ongoing project to compile a stunning collection of seamless patterns. It seems like they’ve networked with some seriously talented designers to build the collection, on top of contributing themselves. In addition to being free-to-use, patterns are bright, modern, and artfully-designed. While the site is lacking category navigation or search, the thumbnail template option makes the collection easy-to-browse. An important note: The site’s interface works best on Safari.
Because I know this isn’t a complete list, what are your favorite pattern or texture freesources? As much as I like giving tips, I love learning what other designers are using! Seems like you might know of some similar sites. Leave a comment below and share your knowledge.
The post Free Textures & Patterns: 5 Freesources appeared first on Samantha Soper.
]]>The post What’s Your Creative Ritual? from InVision Blog appeared first on Samantha Soper.
]]>Recently, I spoke about my creative ritual with Kristin Hillery, Contributions Editor at InVision. As a result, I shared how a notebook, good music, and external creative endeavors do wonders for my thought space. Furthermore, the full article has perspectives from several other creatives about their rituals. Find some inspiration for your own creative ritual by checking out the piece below:
“Push yourself to have creative outlets outside of your day job.” https://t.co/NeGvH9LFd1 by @kristinhillery pic.twitter.com/0IPwtk38G3
— InVision (@InVisionApp) July 9, 2016
The post What’s Your Creative Ritual? from InVision Blog appeared first on Samantha Soper.
]]>