Designing Interfaces

Designing mobile screens often includes positioning elements on the screen for optimal reading and human interaction. Oftentimes designers will work in an art board based program using the edges of the art board (or screen viewport) as a guide for laying out the content on the screen. But are all edges of the screen equal. The answer is NO, because of the golden ratio and the human eye.

“Adrian Bejan, professor of mechanical engineering at Duke’s Pratt School of Engineering, thinks he knows why the golden ratio pops up everywhere: the eyes scan an image the fastest when it is shaped as a golden-ratio rectangle.”

-Mystery of the Golden Ratio Explained

The Golden Ratio

The golden ratio is when the sum of 2 quantities is the same as the larger of the 2 quantities.

Artists have been creating compositions with this formula for centuries, believing it created art that was more balanced and aesthetically pleasing.

The golden ratio is also used in the Fibonacci sequence and the golden spiral. The golden spiral is often found in nature from seeds on daffodils to pinecones to seashells to weather patterns and galaxies. Everywhere you look you can find examples of the golden ratio.

Bottom Weighting Picture Frames and the Golden Ratio

A bottom-weighted picture frame is where the bottom border of the frame is wider than the top and sides. Some believe this practice started during the Victorian era where pictures were hung high on the wall at an angle, making it easier to view but visually off-balance. To correct the illusion, artists began framing their artwork with a wider bottom border.

Although it may have started during the Victorian era, it continues today, likely because the optical center of a framed area is perceived as more balanced than the geometric center. In other words, the human eye is naturally drawn to the space slightly above the actual center of a given space.

This is an effect of the of the golden ratio.

Using bottom weighting and the Golden Ratio to find the optical center of a mobile screen

The golden ratio is great for creating artwork, but does it help with balancing content in a mobile screen? The answer is: YES, you can use the ratio, and a modified picture framing technique to find the optical center of the screen.

To do this determine the appropriate frame dimensions, identify the golden ratio of the frame, adjust the bottom border and viola — you have found the optical center on a small screen.

The example below demonstrates the result. Notice the subtle difference between the physically centered screen and the optically centered (aesthetically balanced) screen using bottom weighting and the golden ratio. One looks right but the other feels right.

Leveraging the relationship between designing and engineering can add emotional depth to the product experience — something customers will feel but not notice.

Read more

I just finished watching Steve Jobs: The Lost Interview and I wanted to share an excerpt that is particularly relevant to product designers. The interview was filmed in 1995, 18 months before Steve Jobs returned to Apple and well, you know the rest. In this excerpt, Steve Jobs shares his views on product design team culture and dynamics.
If you like the excerpt, I suggest buying the DVD.

This excerpt had additional meaning for me. A few years ago I had created some polished stone icons for OSX under the GNU public license. Apple contacted me about using the icons and I donated the set to their product development team.
I never understood their interest but interesting coincidence nonetheless.

Read more

With the increasing importance of the product experience as a competitive differentiation, designers need to think about making value connections with their customers. Designing for value requires discipline. Using successful measures of value opportunity will help designers get there.
Originally introduced in 2001 by Craig M. Vogel, Jonathan Cagan, and recently cited in the International Encyclopedia of Ergonomics and Human Factors, Value Opportunities provide the best opportunity to connect with customers in a deeper more meaningful way.
When designing a product experience, consider the following Value Opportunities as a means of measurement to determine if your product experience is hitting the mark. Continue reading Design For Value and Connect With Customers

Read more

On April 3, 2013, I sat on a panel for a special program, sponsored by the PDMA and the Bresslergroup. The program included students from Philadelphia University Masters in Industrial Design program as well as software engineers and product design leaders from around the Philadelphia region.
The program focussed on emerging trends shaping user interface design process with the industrial design process. The panel was moderated by Rob Tannen, Ph.D, Director of Research and Interface Design at the Bresslergroup.
I included a brief summary of the topics we covered below… Continue reading User Interface Design – The Key to Consistently Providing Superior Customer Experience

Read more

If you look up the definition of persona you will learn there are various types of persona, each different depending on their context of use. There are persona for literature, music, video games, communication studies, psychology, marketing and user experience design. Although their use varies, personas typically include people, actions,  behaviors, a back story, and specific context or scenario.
If you plan to develop and  use persona in your experience design work, make sure you follow a structured approach. Continue reading About Personas

Read more

Finding the right terminology for a product’s features and content can be challenging. This can be especially challenging if the original taxonomy evolved within a highly specialized group or culture. Terminology born under these circumstances can easily be considered jargon and completely foreign to others outside the group.So how do we avoid terms that can be considered jargon? Continue reading Name That Thing Exercise

Read more

When designing a product, terminology can be as important as a product feature or content. Using unrecognizable terms for navigation can make features and content impossible to find. After all, if you can’t find it, it doesn’t exist. To that end, it is generally good UX practice to avoid jargon. But what happens when your users are steeped in jargon?. What should UX practitioners do?
Let’s start with a definition. Merriam-Webster defines jargon as…
Continue reading Jargon guidelines in product design

Read more

by Matt Webb, CEO of the design studio BERG. The studio specialises in product invention and strategy
The following summary was pulled from, Matt Webb’s blog. The article outlines considerations for product designers working on digital or “virtual” products. Here are some key considerations.
A product is just like a product when the product is…

  • shelf demonstrable – their value and utility are self-evident, with no interaction
  • sociable – explainable in a  sentence or 140 characters or less
  • audience specific – fulfilling a known need  or purpose for a defined persona
  • measurable – success metrics are defined, built in and used to inform direction
  • predictable – products should behave as expected. Understand expectations framed by experience and metaphor
  • holistic – the service, brand and product compliment each other throughout the customer experience

Read the original post here…

Read more

A few years back I was hired to build an internal UX practice and redesign a legacy ad serving platform for a large Digital Agency. Like all of my projects, I started with highly visible, collaborative customer and technical research. I created the video below to summarize my first 3 months on the job and demonstrate how the research would guide the design.

Read more