2/11/2017

Trade Offs: Insights from Design Explosions

As designers, we are always curious to read and know about the latest trends in design and get other people’s opinions. Through a relatively new blogging platform called Medium, Design Explosions offers insights on just that. Their article about mapping apps gives some pretty in depth analysis and comparison between Apple and Google maps, and let me tell you, it is thorough!

The content and format of the article itself is extensive, yet easy to follow. The multiple side by side comparisons, along with the more “wireframey” views of each interface made the whole analysis easy to understand, and resulted in almost no scrolling back and forth to see what they are referring to. The analysis gave detailed insights about each app and what it’s strengths and weaknesses were, right down to the exact pixel! Seem a little overboard? Perhaps, but for someone just starting out with UI and UX design, this article really got me thinking.

The article made some great points about the UX of each app. They pointed out how many steps it took to do something, the awareness of the environment, and the placement of icons related to the thumb area. Both apps took a different approaches when it came to optimizing for driving. Google optimizes by having all the options on the screen ready in one tap and Apple optimizes by having everything tucked away so the map is bigger. This is one of the trade offs (as explained by the article) that designers face. I, too, have experienced some of these trade offs when designing my mobile portfolio site.

For my first prototype I used the controversial hamburger menu (the only hamburger people will ever argue about) in the upper right hand corner. Although this area is easy to reach, it seemed to lack any personality, and I wasn’t really thinking about the function of it once you scrolled down. A second prototype put the entire nav fixed at the bottom, sort of like Instagram. The benefit of this design is that it is only one tap to get from page to page. But unlike Instagram’s cute little icons, my nav was words, leaving almost no tap target room. Not to mention, where would my social media links go? And my entire brand identity is missing from page to page. I needed another solution.

The latest prototype still has the fixed nav at the bottom, but uses a “Menu” that slides in from the bottom that includes the nav, social media, and my brand on every page. And just like Google’s and Apple’s maps, this design definitely has some trade offs. It once again takes two taps to get to the next page, but with every trade off comes benefits. The nav is easy to reach, and is hidden just enough to not distract from the work above, and the added branding reminds the viewer what website they’re on. I don’t believe that this is the perfect solution, but I do believe that my progress has gotten me thinking more in depth about UX design and how trade offs can impact the user.

One last thought about the article is a quote from William Van Hecke. He says, design is simply “deciding how a thing should be,” and there is no one “right design”. Yes, it has to function properly, work for the user and look beautiful, but there are so many ways design can be handled. It’s important to find the right balance between what is right and what feels right, and that is what I believe is what makes design so tricky. I could have used the hamburger menu at the top, but is that how it should be? Is there a better solution? And, more importantly, is there something more unique? Design is not black and white, and this article definitely made this clear. There are trade offs with every decision, it’s just about deciding which of these trade offs to make.

As always, happy creating! 🙂

Psst! Read the full Design Explosion article here! http://bit.ly/2lCMxym 

1/27/2017

What’s Your Style? A Peek Into Style Guides

At one point or another, every designer has attempted to create some sort of style guide, and when done successfully, these guides can make for a very strong and powerful brand. But what exactly is a style guide? Brad Frost describes a few different definitions in his article (which you can check out at the bottom of this post). Whether it’s the brand identity, language, tone, writing, code, or pattern libraries, creating specific guides for companies to follow creates a consistent and cohesive design. And, according to Frost’s book, Atomic Design, it also shows the client that the design well thought out, making the brand more trustworthy.

I couldn’t agree more with Frost’s ideas. Ever been to a website where the checkout page looks completely different from the rest of the site? Um, am I even on the same website?! Yeah, unless you’re feeling brave, you probably got out of there as quickly as possible before they hacked into your bank account. OK, this probably wouldn’t happen, but consistency and trustworthiness go hand in hand. However, just having a consistent look isn’t everything.

Consistent language and tone across the brand also plays a major role, and keeps people coming back. Think MailChimp, the world’s favorite little monkey. Or maybe you’ve seen Etsy’s old “Oh crumbs!” empty search results page. This sort of colloquialism (I know, big word) makes the brand unique and memorable. However, creating a guide is important in order to keep the brand on track. Personally, I like to create a list of words that I say, find, or hear someone else say, and always keep it handy for when I find a new phrase to add. (I’m actually surprised that the thesaurus website isn’t in my Frequently Visited tab).

So what’s your style? And have you fully identified it? Brad Frost definitely brings up some good points about the importance of a cohesive design, and creating a kit of looks and words that can be used throughout the brand and given to everyone in the company. Even on a smaller, non-corporate level, I believe that style guides create a pathway that helps drive everything you do for your brand, and can only make it stronger.

Happy Creating! 🙂

Psst! Check out more of Brad Frost’s article here: http://bradfrost.com/blog/post/style-guides/