4/3/2017

How to Design for a Developer

Time and time again, designers will tell you about the importance of having a relationship with the developer from the start of a project to the end. I’ve heard this repeated at multiple studio tours, talks, and even read about it in blogs like this one from InVision: Why You Should Design to Develop. Developers aren’t designers, and designers aren’t necessarily developers. It’s important to have that communication right away in order to end up with the best design.

I can speak from experience here (at least a little). Last year at an internship, I had the opportunity to re-design a couple of websites for the company I worked at. I can remember having multiple meetings with the design team and developers. We would show the wireframes up on a large screen, and sync it to our phones via Sketch. We would discuss some of the potential issues with content structure, navigation etc. And I learned a ton from these meetings! While the other designers might have some more “designy” advice, the developers had a ton of insight into technical things that I wouldn’t have otherwise thought of. They can tell you if what you’re designing is even possible, and can help redirect you from spending too much time on something if it isn’t going to work.

Developers save you time.

 

Well these meetings continued throughout the process, and each time I would come back with a page of notes and changes to make. And the thing was, these meetings never took that much time. In fact, it was probably one of the best uses of our time. (Not to mention how excited the new design made everyone by the end of the meeting). It kept everyone informed and on track throughout the entire project.

And if you’re really good about sharing your ideas with your developers, your designs can reach the next level. I’ve recently learned about some tools that can help with this.

InVision

You’ve probably used this, or at least have heard of it by now. Every design studio I’ve toured used this tool, and it is a great one. InVision allows you to demo your design by showing a clickable walk-through. It also allows other people (developers, designers, clients) to comment on specific aspects of your design.

Flinto

This is a new one I just discovered. Flinto is an app that syncs with Sketch (yay) and allows you to create simple page and content animations. The interface looks just like Sketch and is a lot easier to maneuver than Adobe’s AfterEffects (although that is also a good tool to learn).

Principle

Similar to Flinto, but from what I understand, is better with fewer screens and more extensive animation. It uses a timeline similar to AfterEffects, but the interface is still simplified to look like Sketch. (See here to read more about the difference between Flinto and Principle).

Zeplin

I haven’t used this one yet, but it is basically a red lining tool to pass off to your developer. It can show you dimensions of elements and distance between them to create (as they say) a pixel-perfect design. And yes, it does sync with Sketch.

All of these apps can help you communicate your idea better to the developer, and, in the end, create a better looking design.

Happy Creating (and developing!) 🙂

3/18/2017

How May I Help You?

Help. That four letter word that everyone is too afraid to say. Yet, it’s one of the four letter words that we need to say, and in UX design, it can be hard to get it. An article from A List Apart titled, “I Don’t Need Help” by Neha Singh explains this topic in depth. She describes the variety of places that help is often needed for users: in a form, defining icons, new features etc etc. Face it, we’ve all experienced that newly downloaded app with those weird icons floating at the bottom. Unless you have time to do some deep exploring into every corner of the app, you’ll probably be franticly tapping icons until you find what you’re looking for.

With this lack of usability also comes relearning. If something isn’t clear enough the first time, chances are you won’t remember what it means the second time either. Digital designer, Thomas Byttebier, wrote a list of times where icons have failed to be clear enough in his article, “The Best Icon is a Text Label.” One of my favorites is the Apple mail icon. I always find myself forgetting which icon means compose, and apparently I’m not the only one either. And if we’re being real honest, I still have no idea what that little envelope does.

It is true, lack of labels and help buttons can confuse and frustrate users. But what can also frustrate users is too much help. (I’m looking at you, 1997 Microsoft paperclip!) You know, those extensive 8 step tutorials that guide you through every possible scenario right when you first open an app. No one reads those! I’ll figure it out myself! There really is a fine line between assuming the user knows something and also assuming the user knows nothing. 

As the article from Singh describes it,

“Instructions offered in a non-intrusive manner can enhance an experience.”

She gives the example of the super cute and charming, Slackbot. Send this little bot a direct message and he’ll answer any questions you may have in a human-centered voice. How cute is that?

I’ve also seen little pop-ups on apps like Instagram and Twitter that give you some “Did You Know” insights about their latest updates. The pop-ups aren’t intrusive, and aren’t meant to block your entire view of the screen. Heck, even Siri does a nice job of showing you things you could ask her. The suggestions don’t show up until your actually talking to Siri herself. They have also given me insights into what kind capabilities Siri actually has, and aren’t always something I could think of on my own. Now I ask her these things all the time!

Ok so maybe asking for help isn’t so bad…in fact, with a little bit of thoughtfulness, UX help can actually be kinda enjoyable (kinda). In fact, I think that this type of design is too often overlooked, when it could actually be a great opportunity to make what seems to be a boring objective, into a pleasant and memorable experience for the user. Don’t make the user be afraid to ask for help, instead give them an opportunity to learn more. This type of thinking goes straight back to the company as well: the more the user can learn about your product, the more they will want to use it, and the better they will remember it. Don’t make things too confusing or difficult to learn, but give them an experience that makes them want to learn.

And as always, Happy Creating 🙂

 

3/7/2017

Augmented Reality: A Big Reality

Augmented reality: a huge trend for 2017 in the UX world. At this point, everyone has heard of at least one app that can turn the normal world into an interactive game of knowledge and power (and that app is most likely Pokémon GO). And let’s face it, Pokémon GO was huge! It was on the news everyday, drumming up local business with PokeStops. You couldn’t go anywhere without seeing someone playing that game. But the truth is, AR has been around a lot longer than Pokémon GO. Google Glass came out 3 years earlier, but, as we know, wasn’t very successful. I can even remember taking picture of my house and virtually painting wall colors years before either of these things came out!

Other apps serve more resourceful purposes. Google Translate allow viewers to translate languages from a picture (which, by the way, is great for menus in other countries). Another app guides forgetful consumers to where they parked their car. Another acts as a mechanic, showing you where and how to change the oil in your car.

Although they all serve different purposes, these AR apps are changing the way people go about their every day lives. AR in areas like retail is expected to grow this year. Other trends are even turning 2D drawings into 3D renderings. Perhaps the biggest thing is seeing new AR headsets and wearables on the market that are more functional and affordable than Google Glass. Wearables allow  you to check Facebook, emails and routes without ever looking at your phone. This reality may someday be built into our contacts and prescription glasses.

But what does this mean? All of this new technology changes the way we function. It can make our lives easier, but it can also make us lazier. Even worse, it can control us. Anyone who has seen the first episode of Black Mirror knows what I’m talking about. These people can see one another’s profiles and ratings just by looking at them. Talk about major Facebook stalking! Not to say that we will ever reach the point where we live based on online ratings, but seeing a Facebook profile next to the face of a stranger is very much a possibility.

There’s no doubt that AR will continue to grow and take a part of our lives more and more throughout this year and the years to come. AR offers countless opportunities for designers and developers to enhance people’s lives, and it’s exciting to imagine all of the possibilities the future may hold. However, I do believe that we have to be mindful of how far we take it. AR can be a very dangerous and invasive form of technology (think back to all of the robberies that happened during the Pokémon GO phase). No longer will UX designers be just designing websites and apps, but they will be creating new, extraordinary realities for ordinary people. The work we create from here on out will impact our lives, for better or for worse, let’s just hope it’s for the better.

Happy Creating 🙂

Sources from this article:

12 Mobile UX Trends

Top 15 Augmented Reality Trends

Best Augmented Reality Apps

,

2/18/2017

Design in Motion

This past year, I’ve found myself becoming really interested in animation and motion design. So much so, that I downloaded AfterEffects, opened up YouTube, and began watching countless tutorials. I picked some basics up pretty quickly and started making little animations and videos. Well, I am no pro, but I do understand how powerful motion can be. It’s the difference between looking at a picture and watching a video. The video adds depth, character, and personality to the story, while the picture is just…eh, well, static.

In a recent project, I was able to put some of these skills into motion (pun intended). In a rebrand for a small business called Artworks, I included a short 6 second animated version of the logo. And let me tell you, it got people’s attention.

The logo from Artworks made me realize how effective motion can be. What I created wasn’t anything incredibly complicated or challenging. But the thing is, animation doesn’t have to be extreme. Just subtle details and movement can change the whole look and feel of something. The article from A List Apart talks about this. They mention how to make a bouncing object. The object goes up, past the end position line by a smidge, and then back down to the end position. It’s subtle, but completely changes the whole mood of the animation.

Of course, you don’t have to be skilled in AfterEffects to use animation in things like websites. Some readymade jQuery, Javascript and CSS will do the job! I found this website last year when creating a cute slide-in effect for my portfolio landing page. The simple interface of the website allows you to choose from a list of CSS items and see them in action. Then, just download the CSS! I plan on using this, and other resources again for my new portfolio site as well. My new portfolio landing page is similar to last year’s in that it’s just my name centered in a field of yellow. Using animation would add character to the page, and also fit my brand personality.

Right away, some of my initial ideas are to have my first and last name slide in from each end and meet in the middle. The arrow pointing down would slide-up last and bounce before reaching it’s end position. Whenever navigation or buttons are hovered over, they could also bounce, or slightly tilt from side-to-side.

Animation is so often overlooked in design, but I think it’s something to really take advantage of. It’s one of the benefits of UI, really. Where else can you make your designs come to life? (Unless your a cartoonist of course). Web design offers so many opportunities to make someone go from saying “Eh” to “Wow, did you see that?” And I can promise you, (especially after my Artworks logo experience) that people will take notice, no matter how subtle it may seem.

Happy Creating (and animating)! 🙂

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/