Posts tagged ‘Design’

Size is relative for the iPhone 6 Plus

big phone in a big hand vs small hand
big phone in a big hand vs small hand

A friend posted a link to Monday’s “Live with Kelly and Michael” where they are talking about the iPhone 6 Plus.

The interesting visual from the segment is the size of the phone appears to change. With Michael Strahan the phone looks completely normal but with Kelly Ripa, the phone looks huge!

Think before you CSS

execution order of CSS affects usability
execution order of CSS affects usability

Modern websites are a rich combination of content, behavior, and style. The behavior has traditionally been implemented in JavaScript and the style has been achieved with CSS.

Ten years ago, browsers were simple and so were web pages. Developers didn’t have a lot of tools. Java in the browser was one solution JavaScript was another. Both had their usefulness, both had their issues. Most Java in the browser has gone the way of the Dodo Bird … thankfully.

JavaScript hasn’t been perfect. It’s biggest strength has also lead to it’s biggest challenge – it’s very easy to learn and use which has lead to it being used A LOT! This make websites heavy and slow, especially for those with slow internet connections such as DSL connections and mobile cellular internet.

Web developers – good web developers – understand not only what JavaScript can do but also HOW it it is handled by the browser. Their testing covers transmission, loading, and execution – not just functionality.

HTML5 and CSS3 are enabling more and more behavior without JavaScript. Modern browsers are really “web execution engines”. Look at the size (install and runtime footprint) of a modern browser and it’s clear it has been built to be a runtime system. They are capable of performing image manipulation from real time scaling and drop shadow to 3D transformations.

The shift from JavaScript to HTML5 and CSS3 for these capabilities brings with it the same developer concerns.

The image in this post is of a website which took approximately 30 seconds to render. It makes heavy use of CSS. As you can see, the developers didn’t consider what happens when their CSS loads slowly. The site is unusable – even confusing – until everything gets loaded and executed.

A good web experience requires a “progressing experience” – one where the user can get value very early and gets additional capability and options as more of the content is loaded. It’s bad design when the “content” is loaded but unusable because the “style” is slow. This type of experience suggests the developers and the owners believe “style over substance”. I doubt they want that to be their slogan.

Front porch columns – Craftsman style architecture


The front porch will receive Craftsman style columns with stone bases. I’ve taken a real picture of the farmhouse and rendered in the five columns.

The bases will be 30" x 30" x 32" (W x D x H) and the columns will be 6′ tall square tapered with a 16-1/2" cap and a 21-1/2" foot.

The stone bases will be made from the same paver stones used for the patio-porch.

On paper the bases sound massive but given the proportions of the farmhouse, they do not look out of place.

… and yes, there is enough space at the top of the bases for a coffee cup … or to put your feet up !

Front porch columns – vote for your choice !


It’s time to finish the front porch. The current appearance is a stone paver "deck" that is at ground level. It is really just a patio extending from the farmhouse out to the end of the overhang. The overhang will receive a lapboard ceiling. The columns are currently steel I-beams resting on round concrete footings, about 24" in diameter. Since the column locations on the footings vary a bit, the base needs to be 30" square to have each column consistently center over each base.

The columns will be 6′ tall pre-formed fiberglass wraps and will be painted to compliment the farmhouse. The columns will sit on 32" tall bases.


  • strait vs tapered columns
  • strait vs tapered bases
  • painted material vs stone bases

What is your vote ?

Visualization exercise

I'm working my way through a drawing book called Rapid Viz. it's mean to help designers to think visually and be able to convey ideas easily through drawings, sketches, and simple mockups.

Today's exercise was “what do you see in the following squiggles?” It's part puffy clouds and part Rorschach test.

Here are my answers:

  • A candle stick
  • A camping tent
  • A flamingo swimming the freestyle leg of a relay race
  • An old pitcher pump
  • A table (with a boogie board on top)

What do you see?


User Experience – the challenge to satisfy left and right handed consumers

It's hard to define “user experience” but they say “you know it when you see it”. I say, “you know it when you feel it”. User experience is more than visual. Perhaps the best urban description it to say it is visceral.

Recently, I was reviewing ideas with a group do user interface designers. We were discussing software applications for smartphones.

While the design patterns being discussed were important, what was missing was attention to the person who would eventually hold a device in their hand. All of us in the meeting had a smartphone and yet, there was very little thought to “would I like to use'this thing we are designing?”

Precision vs non-precision gestures

Mobile devices support a number of different input. While shaking, bumping, and rotating the phone can be used, the majority of input comes from tapping and swiping. Tapping is typically a precision gesture – tapping a button, selecting from a list, typing on a virtual keyboard. The user must hit a specific target for a specific amount of time and not move while doing it. Contrast this with a swiping gesture where the user can typically start in any of a large part of the screen and only needs to slide the finger (or thumb) in the general desired direction. Thus, swiping is a non-precision gesture – scrolling a list, sliding between two screens, opening a menu at the side or bottom, exposing a drop-down from the top (for examplr the iPhone notifications page).

When given the choice of implementing a precision vs non-precision gesture, it is “kinder to the user” to go with the non-precision choice.

Left vs right handed users

A smartphone is not a large device – even the comparatively huge 5″ devices. Most smartphones are designed to be usable with one hand (as seen in the photo). The user is cradling the phone and only has their thumb for interaction. The thumb naturally follows an arch from the upper corner closest to the hand to the lower corner farthest from the hand. The challenge is that these locations are dependent on which hand hold the phone. In the right hand, the ease of access starts with the upper right, then lower left, then upper left, and finishing with the lower right as the most difficult location to reach. A user holding a phone in the left hand would reverse these to upper left, lower right, upper right, and then lower left.

So where do you put input control when you have both left and right handed users?

Part of the answer flows back to precision vs non-precision input. The more non-precision input you achieve, the less challenging to left and right handed users. Next, the comfort of top buttons exceeds that of bottom buttons.


There is no perfect answer. However, by thinking about “how” a user will interact with a mobile application, (in addition to why and what-for) you will achieve a better user experience and a happier user.