I was recently asked to give a talk to some Long Beach web and app developers about front-end design. I don't know much about HTML or CSS but I figured I could talk about why we graphic designers are always so nit-picky with the details.
Today we are living online more and more. That means getting design details right is essential to our online happiness. As designer and developer we serve the same customer and have similar missions; to create things that improve life and delight the senses. How do we do that?
People need to feel safe and happy using a website or app and THAT requires getting the details right from the start.
Getting developers and designers to see eye-to-eye on details can be challenging and THAT could be due to a lack of understanding OF WHY details are important, such as moving a BUTTON 3 pixels to the left. It may seem arbitrary or nit-picky, but believe me, these little things are crucial to the success of your product.
I want to give you a couple of examples of gorgeous, functional websites.
Virgin America is the first one.
Airline websites are starting to finally get more user-friendly. Virgin America has one of the best websites that pushes usability, accessibility, and responsive design forward. In fact, it's been named as the first truly responsive airline website, leading their industry. And we all know that having an easy airline experience is valuable.
Secondly, Square is now one of the most referred to websites for successfully getting the details right.
Square uses the mentality that simplicity is key. And wisely so! With products like Square, it can often be confusing for visitors to figure out exactly what steps to take to set it up. Square's website makes it easy by getting right to the point, and limiting the different avenues a site visitor can take. Because of this, it’s one of the most used in-store purchase services.
Both designers and developers have certain areas of expertise, capacity, and insight - and they’re not the same. One is not better than the other. We need each other for a good, functional website.
One option is to keep the same cycle of revisions between designers and developers to get the design to look amazing while functioning correctly, but that often leads to frustrations and bad-feelings on both sides.
OR, you could create a partnership between designer and developer based on the idea that making the design details correct will promote success! This involves a short but fun, lesson in human psychology.
You might not realize this, but you make emotional decisions every time you look at something. We decide right away if we trust it and if we want it or don't. Then we decide how useful it'd be to us, and finally, how we will be associated with it. In more technical terms, these are your visceral, behavorial, and reflective senses.
Research on emotion and cognition has shown that attractive things really do work better. People are willing to spend thousands of dollars on products that make them feel happy. Aesthetically pleasing objects appear to be more effective, by virtue of their sensual appeal. This is due to the affinity the user feels for an object that appeals to them, because of the formation of an emotional connection with the object.
Let’s talk about the emotional responses now. Visceral is subconscious. It’s an instant feeling and reaction. It’s your gut-feeling and it’s the most primal way of making decisions. You don’t even know you’re doing it, but you know if something feels right or wrong.
Behavioral is also subconscious, but it’s the feeling of control. How well does your website work? Is it frustrating? Is it easy? We can get good behavioral responses by applying user-centered design. It focuses on understanding and satisfying the needs of the actual user. The first step in behavioral design is to understand how people will use a product.
This is called a KYO steel knife. It’s a perfect example of a behaviorally designed product. It’s handle is shaped to fit gently in the hand and it’s lightweight due to the hollow handle so you can use it for a long time without getting tired. The sharpness and design make your kitchen look stylish too!
Finally, Reflective is the way you judge things and uses the superego or “self-image”It’s the way you see yourself with the product. You feel cooler, tougher, safer, etc. It fills emotional needs, establishes self-image.
Here's a great reflective product. Owners of the Hummer have said, "You know I've owned many cars in my life -- all sorts of exotic cars, but never have I had a car that attracted so much attention." It's about attention. It's about their image, not about the car.
A good partnership between the developer and the designer will see that all of these elements are put into their design.
To get there, you may want to use these 2 helpful techniques:
Batching up the work. Fixing one pothole won’t smooth out a bumpy road - you’ll barely notice the difference. See if you can put all the UI bugs into one sprint. Piggyback off regular “fix it” days with design fix-it days. Ask for spreadsheets with all the design fixes so you can crank thru the list. Even if you don’t fix all of them in one day your design will still be noticeably better. It will make everyone feel great plus will motivate the team to focus on fit and finish issues in the future.
The second technique is Polishing as you go or POLYGO! - This means grabbing the designer as you fix the issue before you check it back in to reduce more revisions in the future.
Understanding why design details are important is key to developing amazing websites and apps, creating happy customers, and happy clients. It eliminates bad feelings between developers and designers. And Opens communication and minds to change and innovation.
To do this will take some time. Maybe there are old habits in place that need to change. This takes practice, communication, patience, but will pay off in success and credibility
If you do this you will attract open-minded designers and developers and we will be ready to face the future of our online lives with less stress and more creativity!