The Starter League UX Design: Top Visual Design Techniques and Research Methods
- Visual Design Principles
- Conducting Surveys
- Conducting Field Research
Visual Design PrinciplesVisual design principles are essentially the aesthetic rules you should be mindful of whenever you create something (like any website). There are four major categories of design principles we talked about: 1.) Unity Unity is the extent to which all of the elements in your design are clearly associated with one another. Unity can be demonstrated in various ways: color schemes, shape of elements, style, or how elements are positioned in relationship to each other (aka “proximity”). Here's a great example of unity through simple, cohesive color scheme, style, proximity, and shape of elements on the Pencils of Promise website (a really fantastic for-purpose organization, by the way):
There are various ways you can communicate hierarchy to users, including:
- Location of certain information
- Color schemes
- Size of elements
- Tone and length of any text
- Use of eye-catching imagery (faces, ﬁres) - baby faces and puppies are always a hit!
Here's an example of the golden ratio on a popular site that we're all familiar with—pretty cool to think of designing a page this way:
This is becoming more and more important because you can't control how people consume digital content the way they do, say, print content. As a designer, you're not going to have control over the dimensions of a user's screen. Due to the boom in reading and general information consumption on mobile and tablet devices, it's more critical than ever that designers be explicit about how fluid they want the design on their sites to be. If you want elements on your site to change proportion between various devices/screen dimensions, you have to create rules about the way elements change to adjust.
There are three main types:
If you build your layout with the 960 grid system mentioned above, you're probably working with a "fixed-width" layout. You know when you're on a fixed site when you expand your browser window out beyond 960 pixels and just see more of the background, or if you make the browser window smaller and a horizontal and/or vertical scrollbar appears. Basically, the elements on the page won't change size or take on a different form or placement on the site. While this design is less optimal for user experience on, say, tablets and mobile devices, it's an easier kind of site to design and maintain.
A fluid (or liquid) layout is designed with percentage-based widths. So, various elements or columns will change width depending on how you resize your browser window. Of course, it takes more thought to plan out a fluid layout because you have to predict problems that could occur at every possible width. Some other cons: it takes some control away from the user, it limits necessary—or creates extra—whitespace, and it can sometimes make text harder to read as elements with text change size. On the flip side, it gives designers more control over how elements appear on a page, it adapts better to various different screen resolutions and devices, and it reduces a user's need to scroll.
3.) ResponsiveResponsive design is becoming increasingly popular, especially with digital publications. Some interesting examples of publications that have switched to responsive design recently: Mashable, Quartz, PandoDaily, and The Next Web. Fun fact for all of you Bostonians and/or design nerds out there: The Boston Globe was the first major newspaper to embrace responsive design. Responsive design is gaining popularity because it really helps designers and brands better curate an experience for their users in a multi-screen world. One popular UX approach is to design for mobile first—because it forces you to have that conversation early about what the top few things are on the page. Although, "mobile first" is still a hard sell because brands are still figuring out how to monetize their mobile presence. It'll be interesting to see what happens in the mobile UX space over the next few years!
Before You Design, Do Your Research!Of course, before you decide how to design a site, it's a smart idea to do some research. There are two major kinds of research: surveys (more quantitative) and field study (more qualitative). Quantitative research is a better option if you want to focus on high-confidence, repeatable results. It usually requires a bigger sample size and closed answer sets (true/false; multiple choice; etc). Qualitative research, on the other hand, is focused on delivering context and insight. This kind of research requires a smaller sample size and answers are usually open-ended, leaving more room for the researcher(s) to understand attitudes and perceptions. Before you begin your research, figure out what answers you're looking for; then choose the kind of research and questions to ask accordingly. Here's a quick overview of surveys vs. field study:
SurveysBest to use when you...
- Want to collect information from a lot of people
- Don't have in-person access to potential users
- Want to understand who your pre-existing users actually are
- Are looking for quantitative information, like demographics (age, sex, race, location, education, etc.)
- Just be careful not to analyze the data assuming causation, versus correlation
- Closed questions (yes/no, true/false, multiple choice, Likert scale) - these questions are less flexible, but they make data easier to analyze.
- Open questions (who, what, where, when, why, how) - you'll get more detail with these questions, but analyzing data will be more labor-intensive and it will be harder to identify response patterns.
- Avoid extremes - no one likes saying they "always" or "never" do something.
- Be specific - especially when you're asking closed questions, give readers specific answer choices (without creating an overwhelming number of options).
- Don't ask compound questions - example: "Do you prefer apples because you don't like oranges?" Those are two different concepts built into one question; you have to ask "Do you like oranges?" first.
- Don't ask about future behavior. People are notoriously horrible at predicting how they'll behave at some point down the road. I don't even know what I want for dinner tonight, let alone whether I'm going to spend $2,000 on a special new gadget a year from now! Instead, ask people questions about their past behavior. They might still lie (regardless of whether they mean to/are aware of lying), but you decrease the margin for error.
- What is the purpose of the survey?
- Who ideally should be taking it? How will you know who actually is taking it?
- How much time will spend on it?
- How many responses do you want?
- How will you “market” it?
- How much time are you willing to dedicate to analyzing the results?
- How important is precision in the way you ask each
Field ResearchBest to use when you...
- Want to understand context
- Need to validate assumptions
- Want to identify needs (vs. desires, which you can get by doing interviews)
- Would like to observe participants interacting, completing tasks, and/or using tools or products
- Spaces your participants can move within
- Spaces that target your user base, or a similar user base (like a store, event, park, etc)
- You can also do "field work" by looking at competitive and comparative sites or applications online
- Any space or artifacts that you admire or can draw inspiration from
- Take your time. Do your best to blend in and truly observe people's behaviors.
- Get Documentation. Take photos or videos if it's appropriate to do so given the setting. Just don't be super sketchy about it. If you're going to take pictures of specific people, it's probably best to just ask them for permission.
- Take the free stuff. If you can get forms, magazines, brochures, flyers, and the like, take it. You might get some more ideas from that stuff later on!
- Purchase anything that's pertinent to your research. Basically, don't steal anything. Stealing sucks.
- Do interviews! Even if the idea of striking up conversation with total strangers feels totally awkward, do your best to get out of your comfort zone and interview people, anyway. Some of your most valuable "data" will come from those human, face-to-face interactions.
- Blend in. If you're going to do field research at a J.Crew store, you probably shouldn't dress like a ninja. I would pay money to see that if you decide to, though.
- Wear sunglasses...but not at night. In all seriousness, if you're outside and it's sunny, sunglasses will make it less awkward for you observe people and situations. But don't wear them indoors or at night. That's just...creepy.
- Take sly photos. You know, we talked about taking sly photos in class, and the idea of that just totally weirds me out. I really don't want to pretend to hold a phone to my ear or be a tourist when I'm really just trying to take a picture of a random stranger shopping. I'd rather just go up to someone and ask for permission if it's really necessary. But hey, different folks, different sketchy picture taking styles!