Showing posts with label Terminology. Show all posts
Showing posts with label Terminology. Show all posts

Wednesday, 3 July 2013

UX Terminlogy: Rams' 10 Commandments of Good Design

(From https://www.vitsoe.com/us/about/good-design)


Have you heard of Dieter Rams? If you haven't, just remember that Apple's main design guy, Apple's Jonathan Ive is often quoted as saying Rams was one of his major influences.


The man behind that is Briton Jonathan Ive, officially the senior vice president of industrial design at Apple, and he has long acknowledged Dieter Rams as his inspiration.
(http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-never-did.html) 
Dieter Rams was an incredible designer that left a large design legacy through his work at Braun (many of his works are on permanent display @ MoMA). What is amazing is that looking back at his life's work the wide range of products he designed for, anything from record players (ie. his famous Snow White's Coffin) to hair dryers to juicers to watches/clocks. You can get a glimpse of the list of products he's produced here at the Less and More exhibit YouTube Clip.

In his interview here he credits one of his influences his grandfather, a master carpenter who was a specialist with surfaces.  Even Jonathan Ive mentions how big surfaces were in regards to Rams' designs:

“surfaces that were without apology, bold, pure, perfectly-proportioned, coherent and effortless”
(http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-never-did.html)  
This made me realize that as a designer, we're actually a amalgamation of our history, upbringing and skills. Much like Steve Job's Calligraphy class, this reminds of the quote from Lord Alfred Tennyson's Ulysses:
"I am part of all that I have met;"
Designers are not simply a trade that is learnt and applied in a vacuum. Good designers are multi-disciplined people. (@SAP, our own CTO Vishal Sikka loves reminding us that we need to be "T"-shaped to excel.)

Yet aside from all his designs, what will likely live on even longer than Ram's designs are his "10 commandments" of design. Ultimately 'great ideas' outlast 'great products'.


1. Good Design Is Innovative— The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

2. Good Design Makes a Product Useful—A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic. Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it.

3. Good Design Is Aesthetic—The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.

4. Good Design Makes A Product Understandable—It clarifies the product's structure. Better still, it can make the product clearly express its function by making use of the user's intuition. At best, it is self-explanatory.

5. Good Design Is Unobtrusive— Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user's self-expression.

6. Good Design Is Honest— It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept

7. Good Design Is Long-lasting— It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today's throwaway society.

8. Good Design Is Thorough Down to the Last Detail—Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.

9. Good Design Is Environmentally Friendly— Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.

10. Good Design Is as Little Design as Possible—Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

The VitsÅ“ company which Rams joined after Braun states that he came up with the list after growing concerned about the designs around him. 


Back in the early 1980s, Dieter Rams was becoming increasingly concerned by the state of the world around him – “an impenetrable confusion of forms, colors and noises.” Aware that he was a significant contributor to that world, he asked himself an important question: is my design good design?
As good design cannot be measured in a finite way he set about expressing the ten most important principles for what he considered was good design. (Sometimes they are referred as the ‘Ten commandments’.)
(https://www.vitsoe.com/us/about/good-design)


His list was created 30 years ago and they are as true today as they were then. One could argue that companies like Apple are using his very principles to dominant in their respective markets. I'm sure all of our own products could be greatly improved if we adhere to his 10x principles.

All the ideas are great. However the following points really strike a cord with me:
#4 - Understandable is what I believe is driving a resurgence in UX. The best products that just 'make-sense' and don't require me reading a long manual.
#8 - Thorough is something I believe in strongly. I like being detailed orientated when possible. I agree with Rams that even the smallest detail is well designed, I know I'm in for a special product.
#10 - Simplicity is something that also really resounds with me. As a designer simplicity is definitely one of the toughest tasks of any good design.

A good visual version of this list also exists here.

Hope that helps...

Wayne Pau.

Wednesday, 12 June 2013

UX Term of the Day: "Hamburger" (#4 Hot UX Trend for 2013...)

*Ahem*...

'Hamburger' meet World. World meet 'Hamburger'...



A hamburger button or control is basically 3x horizontal lines of equal length that review a side navigation panel. The going 'theory' is that it's called Hamburger because the top and bottom lines are the 'buns' and the middle line is the 'meat' or burger patty.



Visually its identical to the menu button beside address bar on Chrome Browser (for those 52% of viewers who use Chrome to view my blog!).

Don't believe it's a new trend? Gizmodo has as #4 new UX trend for 2013. See here.

This newest little UX pattern is on the latest LinkedIn and Facebook app released just earlier this year. Jessica Lessin from 'WALL STREET JOURNAL' even did a feature article on "Hamburger Button" in March (2013) with a short video demonstration of the control on the WSJ app:



*IF* you are planning on using a Hamburger in your app, I have a few suggestions because this control is implemented so many different ways:

  • When it's used just as a menu control in a top nav bar, it often acts like 'Butcon' (Button Icon) which you 'Tap'.
  • When using as a sliding menu, it is a 'Tap-and-Drag' control. 
  • However I also like the 'Bezel Swipe' gesture to also open *and* hide a menu control. (This last one is used quite often on BB10 and Win8 Surface to activate standard device menus.)

Therefore you would need at least these 3x ways:

  1. 'Tapable'  Menu butcon with visual feedback for depressed state
  2. 'Tap and Drag' control, so user can "drag" open the menu
  3. 'Bezel Swipe' gesture from the left side of screen (along *all* of the left-hand-side).

Well, there you have it. 

If the trend stays the same, we're likely to see this control on just about everything, just like we saw the explosion for "Pull-to-Refresh". (Interestingly, for those of you who didn't see it, I think Twitter and Loren Britcher got it patented... but agreed to "only use his patent defensively"...)

Baring any radical changed, you should start to see the Hamburger on at least one Mobile SAP app that I have pushed for on at least two different platforms. SAP isn't a radical IxD shop, so when we're adopting it, it's "definitely" gone mainstream! ;)


Hope that helps...

Wayne Pau.


p.s. Er...so that Hamburger control, it just three lines right? Well.. make you don't get it mixed up with the following somewhat 'similar' controls:




1. Motorola Hardware Menu Button
2. MS Word Bullet Butcon
3. Android Holo Composition Icon
4. Android Context Action Bar Overflow (top right on Android devices)

To be honest there are a of other very similar ones too, I could have easily expanded the list. It just goes to show you, it's all in the 'subtle' details, right?

p.p.s.Still don't believe me? Well here are two screen shots from the recent Facebook and Flickr apps.
(Facebook @ Android)

(Flickr @ Android)





Thursday, 6 June 2013

UX Term of the Day: "Fitt's Law" (aka Fat Fingers...)



Ever have one of those controls on a screen that was Soooooooo small you couldn't tap it twice in a row if your life depended on it? These are the apps that make me pull out my pinky-finger in order to try to tap something... (If I'm totally honest with myself, pretty much every mobile phone soft-keyboard feels like this at times...there just *never* seems to be enough space to fit in all those keys!)

Earlier this year I was helping test an application for BB10 that clearly had some usability struggles. One of the issues that really stuck out was that one UI controls was about 4mm in width. That's actually about 1/2 what size it should have been.

So how big is big and how big is big enough? Turns it's not arbitrary and we have some math & science that basically tells how big something should be. The formula often used is called Fitts' Law:


Fitts' Law Formula

I've *simplified* here, but Difficulty (or technically the ID - Index of Difficulty) is logarithmically proportional to Distance Moved or how far the user has to move (the cursor or their "finger") and the Width of Button or the size of the 'tappable area' of the UI control. 

When we're talking about menu or nav buttons which could be selected from anywhere, really we don't care about distance moved (because it varies a lot), so really usability is somewhat *inversely* proportional to size. Even more so, if size *approaches* zero, the difficulty level becomes infinite! (Starting to remember infinity and limits from first year calc class, right?) 

In plain English, smaller buttons are harder and larger buttons are easier. Obvious right?

*However* the 'amount' that they are easier to use isn't linear, but rather at some point making the button bigger doesn't help *that* much. The converse is also true, at some point a little smaller can make it *really* *really* *really* hard to use.

For the full math and derivation of Fitts' Law, I'd suggestion the following links. (These are mostly best left for "geeky" HCI PhD's...)


For the rest of us 'mere mortals', I would use Microsoft's (see below) much more human-understandable guidelines. I especially like MS depiction of various 'sizes' of fingers!

Quote from Microsoft (Win8) Touch Interaction Design Guide:


"People often blame themselves for having "fat fingers." But even baby fingers are wider than most touch targets. The image on the left shows the width of the average adult finger is about 11 millimeters (mm) wide, while a baby's is 8 mm, and some basketball players have fingers wider than 19 mm!"


http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

MS goes on to say if you have a control @ 7mm, your error rate for mis-taps is about 1%. If you can make it at least 9mm, it's 0.5%. Notice how the curve is *almost* logarithmic? (Anything after 10-11mm, the difference is marginal at best. The % of missed taps gets smaller, but never 'actually' becomes zero...)

http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

Apple too states that UI controls should be about 44 Pixels, which is about 9mm in real life on iPhones and iPads. Google/Android says 48 DPs, which is about 9mm on Superphones and Tablets, but the guidelines say stay within 7-10mm range if possible. 

(I think this is one of the *only* times I've ever seen all 3x big players agreed on anything!)

So bottom, if you don't want to do the messy math, 8-10mm should be a good threshold. Any smaller and you run a real risk of "mis-taps" from your mobile device (and likely *frustrated*) users.

Hope that helps...

w.

p.s. Still don't believe me? Every platform has a default "calculator" app. Load up the calculator app on your device and measure the physical size of the buttons. Break out the ruler and give it a try yourself!

Every time I've done this, at least one dimension is always at least 8mm long or longer. 



For the record here a quick snapshot of my finger on a ruler. I'd say that's just under 10mm and I assure you I don't have basketball player sized hands!

Wednesday, 5 June 2013

Pop Question: What's a Phablet? (Is the iPad Mini a Phablet?)

For a while now the 'industry' has been just inventing terminology for devices. The latest one is 'Phablet'.


Phone + Tablet = Phablet

Basically it's a device that is too big to be a phone and too small to be a true tablet. Here is "semi-official" breakdown of devices:

  • Phones - 5" or smaller display
  • Phablet - >5" and <7" display
  • Tablet - 7" or larger display


Phones today range up in size to largest phones like today's HTC One, Samsung Galaxy S4 or iPhone 5. On the smaller end they are like the cheaper "free" with contract Android phones or smaller HTC One SV or Samsung SIII (S3) Mini.  They are generally cellular devices, used regularly as phones and kept on the individual at all times.

Tablets today range up in size to 10"-ish devices like Samsung Galaxy Tab 10.1, Google Nexus 10 or iPad 3. On the smaller end they are like Samsung Galaxy Tab 2 (7"), Kindle Fire or iPad Mini. They are mostly used on WiFi or data-only devices, and often used in landscape (and not portrait) mode.

Phablets are the compromise between the two worlds. While other 5"-ish sized devices existed first, the forerunner for Phablets was the Dell Steak 5 (which died in 2011) which was unique in that it was bigger than a phone, but still could be used as a phone. 

However in my mind, the real 'King' of Phablets now is Samsung Galaxy Note and Note II (2). What makes it unique to me is not so much the size, but the EMR stylus which I mentioned in a previous post here.

Practically what does this mean? I don't really develop directly for Phablets. In reality I treat them as Phones, since the overall dimensions more resemble a Phone. 

For example, Samsung S4, a definitely Phone format is:
  • 5" Display
  • 16:9 Ratio
  • 1080 x 1920 Pixels
For example, Samsung Note II, a Phablet format is:
  • 5.5" Display
  • 16:9 Ratio
  • 720 x 1280 Pixels
Therefore the Note II is basically about 10% larger diagonally and lower number of pixels (but identical to the older SIII, which was 720 x 1280 pixels). The difference is **nominal**. (The Galaxy Tabs have 5:8 ratio which is much more "squat".)

Samsung Galaxy Tab 10.1 (left), Galaxy Note II (middle) and Galaxy S4 (right)
Have a look at the low-res snapshot above. Which one do you think the Note II more resembles? Tablet or Phone?

So practically... for me... from a mobile app development point of view, there is still just Phones and Tablets. 


Lastly, is the iPad Mini a Phablet? In my mind "no". It's well in the Tablet 7"+ space (7.9" to be exact) and it keeps the full-sized iPad ratio of 4:3. So for me, Phablets are pratically *only* an Android concept right now. 

For Apple, there are only iPads and iPhones. No iPhablets. Yet. j/k.


Hope that helps...

w.

p.s. For a great list of screen size, density and ratios, this Wikipedia page below is great. I use it all the time and it's fairly up-to-date and has almost all the most common devices:



The other list I usually use is off Blundell's blog, which is also updated very regularly. 


Monday, 3 June 2013

UX Term of the Day: "Affordances" (aka Hints for your Users!)

Last year I had former college @ SAP, Quan Sasaki remind me that "Affordances" is the number one term that non-UX-ers forget about. Almost 15 years ago I had the term drilled into my head @ University Waterloo when I was first inundated by the Human Factors prof Carolyn MacGregor on Donald A. Norman and the same principles.

Websters has the following definition:


Affordance - A visual clue to the function of an object.

I don't think I can understate how important this term is for mobile apps. On desktops we have mouse-overs and tool-tips which are great at explaining what to click on desktop apps and websites. Cursors change (on desktops in Windows, often a arrow tip to a hand with a finger pointed up) when we roll-over buttons and buttons generally have at least 3x states: normal, hover/mouse-over and down/click.

On mobile devices we don't have these things*. We have "fat fingers" with very inaccurate haptic interfaces on small devices (UPDATE: For more info, see this later blog entry). *Therefore* we need to make a concerted effort to assist users visually as much as possible with hints or "Affordances".

Consider the following example:

#1 - Butcon (Button Icon) with little/no affordance 


In this case it's a very common menu or hamburger control (If you don't know what a Hamburger Control see this later post) that has etched view or 3D-ish look. You could argue that the styling and location on screen could imply it's a "butcon" and that it means it can to be clicked or tapped, but that's a little 'esoteric'. 


#2 - Butcon (Button Icon) with button frame


For me just the small border around "butcon" makes a 'huge' difference. It tells me it's not *just* a background artifact and that the rounded square border implies button (oval or circle border *might* not have the same convention and red border might mean something altogether different too).

Everywhere we are surrounded with 'hints' to how things work. Handles on mugs imply where to hold, vertical & horizontal poles imply where to hand onto on buses & subways, (well designed) door handles imply when to pull or pull, etc. 

Life is tough enough as it is. Using a new app is hard too. So next time, give a little "Affordance" on your next mobile app. With any luck you'll have a happier user! =)

w.

p.s. *While I said we don't have mouse-overs on haptic (aka "touch screen") Mobile Devices, that's not 100% true. On Android, specifically Samsung's Galaxy Note line, when using the Stylus on the new Note II, you can get a "hover" feature, where a small circle is shown on the screen when your stylus is *just* above the surface. Very cool stuff. 




I believe Samsung is licensing Wacom's EMR technology which lives behind (or below) the LCD display, therefore not impact the visual quality of the screen at all! (Think passive RF tag; it's why the stylus or pen doesn't need to be battery powered.)

For more info see:

For the *super* geeks, these are two more great links about nitty-gritty details. I thought both were very cool: