It’s Week #2 of the UX Design class I’m taking at The Starter League. After covering UX design heuristics last week, we dove right into these three topics:
- Visual Design Principles
- Conducting Surveys
- Conducting Field Research
Visual Design Principles
Visual 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):
2.) Hierarchy and Dominance
Hierarchy is the established order of elements being viewed. Essentially, hierarchy influences the path that a user’s eye will take while he or she views a page. The more important the information is that you want to convey, the higher up in the hierarchy it should be—meaning you give it prominent placement on the site to make it more likely to stand out to users. Similarly, less important information should be lower in the hierarchy and less visually prominent on the page. Here’s an example below. You can clearly see that the designers of this site are nudging you to read the “Car Safety Seats” article:
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, fires) – baby faces and puppies are always a hit!
Our instructor, Carolyn Chandler, said, “In general, objects that are larger, brighter, and have higher contrast against other objects on the page have more dominance, and text that is short and commanding will attract attention as well.” Of course, that means the smaller the real estate on your site, the simpler your hierarchy must be. What I took out of this advice: don’t try to make a lot of stuff stand out. It’ll look tacky and cheap. It’ll also make users’ eyeballs go all over the place, and that’s lame when you’re trying to call out one or two important things.
3.) Economy of Elements
The idea with this visual design tactic is to basically eliminate things on the page that take away from the information you’re really trying to communicate. The goal here is aesthetic, but minimalist, design. One common example of this principle gone wrong is 3D pie charts. Check out this illustration:
This design principle was my personal favorite.
How often do you see 3D charts like the one on the left? All of the time! While adding a 3D element to a chart might look nice, it’s actually a distortion of the data. In the graph on the left, the purple portion looks bigger in relation to the green portion than it does in the flat chart on the right. It never occurred to me until I took this class, but I saw it so clearly with this powerful example: don’t do too much!
It’s not about how many bells and whistles you can add on to whatever you’re building—it’s about providing the user with a content consumption experience that is simple, aesthetic, and doesn’t distort—or otherwise take away from—the information you’re trying to communicate.
4.) Proportion and Balance
The proportion of a design refers to the size relationships of various elements on a page to each other, as well as to the outer dimensions of the overall design. We talked about several specific tactics, including the rule of thirds, which proportionately aligns elements on a page to be highly visually appealing, and the 960 grid system, which is a widely used tool that helps streamline the web development process by providing commonly used dimensions (based on a the common site width of 960 pixels).
The “proportion and balance” technique I found most fascinating, though, was the golden ratio—named to capture the meaning of “divine proportion”. It even sounds delightful. Apparently, the golden ratio is related to the Fibonacci numbers (it should be obvious by now that I haven’t taken a math class since high school). Way too complicated for my taste, so I’ll just show you a picture:
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:
Fluid Design
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:
1.) Fixed
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.
2.) Fluid
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.) Responsive
Responsive 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:
Surveys
Best 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
What kinds of questions should you ask?
- 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.
Questions to ask as you plan out your survey:
- 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
- question?
Field Research
Best 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
Where should you do field research?
- 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
Just make sure to…
- 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!
Until next week…
Previous articles: Starter League UX Design: Week 1