Monthly Archives: March 2017
To make it easier for you — and perhaps to let you know that you’re not alone — here is a roundup of the most common interaction design misconceptions.
1. Overwhelmed with Innovation
Web designers are a creative lot. We want to express ourselves through our work. We’re always looking for innovative ways to make designs stand out. However, when it comes to IxD, innovation doesn’t always work for good. It might even be bad for your site. Users crave familiarity and often they are tuned in to certain ways of operation.
Randy J. Hunt, Etsy’s Creative Director and author of Product Design for the Web, put it clearly: “Hey, designers: stop trying to be so damned clever.” In this article, he explains in greater detail why you should not go overboard with innovation in designing for the web.
Take the Iotorama website,for example. It looks beautiful, the music is soulful, but with with all those balls moving, the user is left wondering what to do. Don’t get me wrong, the project is fantastic and super-creative! I liked the gamification idea, but it’s far from intuitive.
Here’s another example. The guys behind the Safety on the Slopes project came up with a neat interactive webgraphic that informs users about the dangers of winter sports. It’s innovative and at the same time intuitive, immersive and fun.
2. Confusing Navigation
The “don’t be too clever” rule stills over to navigation as well. Some designers attempt to be original by experimenting with eclectic names for pages. For example, the Chijoff website leaves users wondering what exactly they deliver and how to hire them. It takes a bit of browsing to figure that the “Co-Create” page is supposed to be the equivalent of “Services.” And even then, after reading through the whole page, the user is still left wondering what to do … the end of the page has a small form to sign up for the latest industry news and tips! There is no form on the “Contact” page either, only postal and email addresses. They just do not make it easy for people to get in touch with them, or hire them.
Can you guess what “Universe” is for on the Maison Margiela website? It actually links to their Facebook page. Who would have thought?
In contrast, check out the legworkstudio’s website. It’s strikingly creative and unusual. The navigation is clear and unambiguous. There’s no chance a user will get lost.
There was a time when websites tried to put everything they possibly could above the fold. Those days are gone, yet many sites still make this mistake. Take this online store:
The designer tried to stick to a simple color scheme, but the sheer number of boxes, logos and fonts in different colors on this page are enough to leave a user reeling. The search bar has catchy “So, what are you wishing for today?” text, but the overall look and feel of the layout is rather outdated.
EBay is the one major online retailer that gets this right. Instead of cramming their website with product images, promotions and multiple calls to action, eBay has kept it clean and simple, highlighting exactly what they want the user to see first, with clear prompts on what to do next.
4. Contrast, Baby!
Compare to this. The color choice is close, but the result is radically different. Plus, the creative scrolling effect smoothly introduces the new amazing product feature — reflective material. Cool, huh?
5. Neglecting Form Styling
Form design is one of the fundamental parts of user experience. Each website has a goal — whether it is to generate leads, directly sell products or provide information. Unfortunately, there are many websites with glossy homepages that prefer to bore users to death with long forms and complicated CAPTCHAs. Unless the users has strong prior motivation, they’ll just leave.
With effective cross-browser solutions like JCF, it’s time to forget about ugly default form elements and move toward a more immersive user experience.
Another irritating thing is when the form is too demanding or not well tested. For example, the sketchybusiness.io form highlights all blank fields, even if they are not required.
If you look at the mostlyserious.io form, you’ll definitely like the hover and active button states. Plus, the “Don’t be shy” note adds a sweet, humorous touch.
Being a UX designer myself, it’s important that we fall back in love with the art of design. Especially when you hit a creative wall.
The reasons vary. Maybe you’ve been working too fast and too hard and burnt out. Maybe you work in a non-creative environment and contend with a lot of resistance each day. Maybe you’ve unknowingly become a repeat performer, putting out the same work over and over again. Or maybe you’re just bored.
Your process should never be so ideal that it can’t change. Every project has limitations. Whether it’s resources or skills, your design process must adapt to all these real-life constraints.
Here’s 7 tips for improving your own design process based on what I’ve experienced in my own career.
1. Define the problem before hunting for solutions
Einstein once said, “If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.”
Many designers make a fatal flaw in thinking problems are obvious. Most of the time obvious problems are merely symptoms of the real problem. You will know when you’ve found the real problem because it will eliminate a lot of other issues at the same time.
As described in the free e-book Web UI Best Practices, start all your design projects with the “How Might We…” approach of design thinking. Remember that before you design the product correctly, you first need to ensure you’re designing the correct product.
2. Know your user like the back of your hand
A developer once told me she was building a product for “everybody”. That might sound reasonable for a mass market product, but you can’t create meaningful use cases if you can’t pinpoint a specific user.
Without meaningful use cases, it’s hard to know what your MVP (minimum viable product) needs to be or how to create a strategic product plan. All great products strive to solve a handful of problems as simply as possible, in a way that’s easily understood by the people who need it.
Conduct user research, create personas, and start mapping out user scenarios and flows. Anything that puts you deeper into the mind of the user is an investment in successful design.
3. Consider extreme solutions to the problem
Part of the fun in designing is going a little off the deep end with ideas. Celebrate the opportunity to think big.
Break conventions just for the sake of it. Think beyond a single device. Storyboard a day in the life of a user and see where all the possible touchpoints could occur. Bust out the markers and crayons. Do whatever inspires you to think unconventionally.
Don’t spend weeks (unless you can afford the time) but take a creative pause to connect your unconscious mind to the problem you need to solve.
Take a look at Duolingo. The app feels more like a smartphone game than a language learning platform. It’s completely unconventional and might sound questionable on paper, but the proof is in the numbers – the company is valued at $470M by Google Capital as of June 2015.
Seek inspiration outside of your immediate industry, and you’d be surprised by how effective (and creative) your design solutions become.
4. Establish a hypothesis to test before you design
A hypothesis introduces a way to seek truth. Every design has a foundation grounded by something strong enough to build upon.
Think of it like an essay’s thesis statement. It is the heart of the design. And it’s where your use cases come into play far ahead of development work.
Brainstorm as many scenarios as possible and whiteboard with your team. Run adesign studio exercise in which participants sketch their solutions for how to complete specific tasks. You should always explore (and iterate) your hypothesis as one of the first steps in design.
For a useful framework, check out Maximilian Wambach’s (Interaction Designer at Ebay) approach. The “If [action] then [outcome] because [customer need/problem]”mindset is extremely helpful.
5. Collaborate with a diverse group on the best solution
If your design is solid, it should hold up to critique and discussion. A group of people from different backgrounds who possess different experiences will lead you to better solutions.
Consider setting up a Think Tank of stakeholders to share their unique perspectives on how your design can be improved. Work with your design manager to ensure that the product team still has the final say, otherwise you fall into the trap of design-by-committee.
6. Create a story with documentation
Produce documentation that tells a story. Your personas are the cast of characters. Your use cases are key parts of the screen play. Your wireframes are the stage. Your process flows and user flows are the choreography. Your UI kit is the set design.
Everything relates and feeds into each other.
Many times documentation is ignored because it lacks context. Think of your design assets and artifacts as puzzle pieces. On their own the pieces have little value, but put together they build a picture that tells a story.
Don’t get tunnel vision and obsess over perfecting one design document. Instead, make sure the relationships between each design stage is easily understood.
Minimize documentation that doesn’t move the design forward. If your documentation isn’t usable, there’s no reason to create it.
7. Design and test on paper
Rapid paper prototyping can be done at any stage and always helps inform design decisions.
Give yourself or a group a set amount of time to quickly iterate ideas. It’s very easy to become attached to a design once it’s move into pixel form. Sketching and prototyping on paper, however, keeps your mind searching for possibilities.
Draw out sketches for the sake of exploring your own ideas, then run a quick hallway usability test with 3-5 people.
As soon as you come up with a design you think is solid, start testing it by conducting a virtual walk-through. Talk through the different use cases with a partner so you can help each other notice any gaps or potential flaws. Once your partner understands how the design works, they can act as the “human computer” for operating the paper prototype during usability testing.
I started learning design in 2007, and a lot has changed since then. Now we have thousands of communities available, tutorial sites, remarkable individuals sharing their knowledge and dozens of opportunities to learn and earn as a designer.
Today, I’d like to share some of the techniques and methods I’ve used to learn design. I keep learning new things every day and some of the examples below are based on my personal experience trying, failing, building and succeeding.
1 Percent Rule
Practicing everyday is what makes you better. The trick is to really commit to learning, set aside some time and show up consistently every day. Just think about simple math, showing up 60 minutes a day for a month is 60 minutes x 30 days = 1,800 min or 30 hours, which is quite a lot of time to learn something. According to James Clear, becoming better just by 1 percent every day will make a huge impact on your progress in just a year, see the graph below to better understand the power you can use to supercharge your learning.
Instead of practicing the same thing over and over again, try to learn something new to use the advantage of tiny gains.
Take Up a Challenge
Take up a challenge and publicly commit to a certain period of time to create and show up everyday. It can be as simple as 30 day sketching challenge or as complex and hard 365 photo everyday challenge. In late 2013 I took on a 30 day writing and publishing on Medium challenge where I was writing about anything and publishing for one month. I’ve seen enormous growth in my confidence, idea explanation abilities and a boost in willpower management.
Simply think of what you want to learn, pick a duration and deliverables and let everyone know that you are committing.
The best way to really learn something is to teach it. “But I am not ready, I don’t know a thing.”That might be true, but knowing something is more than nothing and you should be teaching others about your craft. By teaching you focus on the essence of the design and try to understand and explain it in a simplest way possible. It improves your analytical thinking and forces you to make connections with different theories and personal experience. Start a log, daily journal or a YouTube channel and start journaling your process for other people.
Work On a Side Project
Allocate some time and work on your passion with a side project that excites you and does not constrain you too much. Side projects will let you experiment with things and achieve much more progress as you will be enjoying it and just playing with it. I teamed up Paula Borowska in late 2013 and started working on the Mobile Design Book that was released last year. It was a fun way to really dive deeper into the mobile design and have some fun producing the book and improving numerous of skills while writing it.
Break Things Down
Mark Zuckerberg, co-founder and CEO of Facebook, believes that you need to experience breaking things to move forward.
“Moving fast enables us to build more things and learn faster. However, as most companies grow, they slow down too much because they’re more afraid of making mistakes than they are of losing opportunities by moving too slowly. We have a saying: ‘Move fast and break things.’ The idea is that if you never break anything, you’re probably not moving fast enough.”
To really understand the design process you need to break it down to the smallest pieces and get to the essentials and then try to recreate it your way. Design community is incredibly friendly and open to sharing the what’s, how’s and why’s of design. You can download free project files for image editing software like Adobe Photoshop, Sketch, Illustrator or any other.
When you’re trying to break things down, look at the big picture and then take it detail by detail, developing analytical thinking will allow you to be more organized and structured in your future work. Take an example you want to recreate and do everything to mimic it so you get to understand how it was built, other than that download free files and analyze the structure, techniques used and rules applied.
Set yourself free. Get into a mindset that everything you create is an experiment. This simple shift will help you to take criticism easier and be more courageous to try new things while not being afraid of failing. If you treat your work as an experiment you can’t be wrong because experiment succeeds or fails, not you.
“I have not failed. I’ve just found 10,000 ways that won’t work.” – Thomas A. Edison
As a designer, it is important to regularly invest in yourself by playing around with the technology and tools you use. There are already many initiatives which showcase what is possible and without these experiments design wouldn’t be progressing so quickly.
Check out a gallery of Experimental Websites, browse through Behance’s experimental work to get some inspiration and courage to try something unorthodox.
“Steal Like an Artist”
Everything is a remix. You’re a mashup of everything you consume so if you surround yourself with things you want to absorb you eventually become more creative. You shouldn’t be ashamed of stealing great ideas, but there is a right way to steal; Austin Kleon wrote a book about it.
You have a unique set of values that filter your thoughts, experiences and ideas that come in and then you produce something of your own. So if you study different designers and their work you filter everything and produce work that is authentic and reflects you and your perspective.
“In the end, merely imitating your heroes is not flattering them. Transforming their work into something of your own is how you flatter them. Adding something to the world that only you can add.”
The current landscape of color in website design is interesting to think about. Most websites look more or less the same, yet color can be a powerful tool in design.
I’m not trying to state this as anything revolutionary or as an extraordinary find. But if most websites have similar color schemes, what does that mean for color? Actually, it means a lot. Imagine a world where every website was colorful – it would possibly be very pretty and rainbow-filled but it would mean that nothing stood out. It’s like having every paragraph bolded in your essay.
Therefore, when color schemes are muted, it allows for many opportunities.
Draw Attention to Anything You Want
Most websites start with a basic grayscale look – white background and black text. Color comes in as accents that get you to look places. That’s why websites are not filled with color – they use it to get you to look at the buttons, headlines or links.
Take Vibrant, for instance, when you first land on their home page the background and images are black and white. The logo, call to action and the hamburger menu are bright yellow. They stand out and grab your attention quickly.
Another example is Takeit; when you first land on their home page you’re greeted with a big blue background. However, everything else is white. The big headline that’s front and center is also the center of attention. Shortly after your eye notices the smaller but still noticeable App Store button. And that’s how color can guide a user’s attention.
Color is wonderful because it can set a tone and mood for a website or brand. Beagle is a service for creation project briefs and their site starts of with lighter earth tones. As you scroll down their homepage you view pleasant shades of brown, charcoal, green and even pink. The earthly tones look professional and elegant making for a great impression on behalf of the company.
An Interesting Day is a website designated to “a weird, one-day conference on a tiny island in the Oslofjord.” You most definitely get a sense of weird and different when you red background with red text on top of it. It’s not something we see everyday. It looks great but most importantly the color scheme conveys the “weird” personality of the event clearly.
Make a Grand Statement
Making a statement through color can be really fun. You have to make sure that the color stands out and grabs the attention of the user. That’s easy. But it also has to be a good color choice for the statement being made. You can’t just pick any neon color, it has to make sense for the overall purpose of the page and its look and feel.
Take the landing page for Gaga Symphony. When you land on their site, you’re struck with a bright pink background. It’s not something you’d expect of a symphony. Instead, you’d expect calmer colors as symphonies are considered more elegant. But, not this one. The Gaga Symphony is vibrant, fun and creative. Therefore, the hot pink makes sense.
Provide Cohesion and Flow
Color can also be used to guide a user along with a flow. It’s exactly like guiding a user’s eye like in the above example of Takeit but less drastic. Color can be subtle and there doesn’t need to be dramatic or over the top in order to help guide a user along. It’s especially helpful when the hues are cohesive among each other. It’s basically how brand colors work.
Take Marvel or Dropbox. Both of these apps have great color schemes that are predominantly blue. But you see other colors in their graphics like green, orange or red that fit well together; it’s like they make sense.
These two color schemes help guide users along as they scroll down the pages making for a cohesive and pleasant flow.
A different kind of example is Innovation Project Canvas. They use the color green to guide a user along their page while scrolling. You don’t need many colors in order to create a great looking flow; it’s achievable with a single color as well. Innovation Project Canvas does a great join in guiding the user with just their green.
Color in Images
An interesting trick with color is when you use it through images. UI elements are not the only ones that can add some color to a website. With the rise of photo background and big product photos on landing pages it’s a good idea to try to use the composition of images to bring color to your designs.
CartoDB is an app that help you visual location data. What better way to show off how great their service is than by showing off a beautiful map? That’s exactly what they do at the top of the home page. It’s a brilliant way for their product to speak for themselves while adding visual interest – and color – to the page.
Speaking of product that speak for themselves, ETQ too let’s their shoes outshine their UI. The website is fairly minimal in its style which extends to the color scheme as well. They put focus on merchandise instead. Although not all of their shoes are colorful like the one in the example it still goes a long way to let the shoes be the biggest course of color in their design. It truly allows the shoes to stand out.
Who Needs Color Anyway?
It’s interesting to see websites without color, too. Sometimes you don’t need it. Websites can still be gorgeous without reds, greens or blues. Grayscale color schemes can create the necessary look and feel for a brand as well as make a statement.
Visual Soldiers does just fine, sans colors, just like Tomasz Wysocki’s portfolio. Both sites have a certain elegance to them. They grab your attention because of an overall lack of color. You’re looking for some slight hint of blue or green on a CTA or a link but it’s not there. And that’s okay. The lack of color is part of these two site’s brand. They both are stylish and look great in just black and white.