UX mea lux

The Magic Radio OB-4 is Teenage Engineering’s latest contraption. The Swedish tech house has a history of creating curious musical instruments, gadgets, and home goods. Prefigured by a product line developed for IKEA, the Magic Radio is a Bluetooth speaker with aspirations of eccentric grandeur.

Inside an obelisk that would have Dieter Rams covetous is a Bluetooth receiver, FM radio with digital scanner, analogue audio input, and dream machine. It presents as a speaker — and it sounds quite good — but it is in the curious Disk mode that this device betrays is surreal raison d’être. Here we find a metronome with speed controlled by a multi-purpose motorized wheel, a meditation setting with looped recordings of two dozen variations on shamanic incantations (yes…), and a hypnagogic real-time radio remixer where the motorized wheel now allows you to control how deep you want to slip away into the void.

The build quality is superb. It was built in Romania in a flourish of European engineering capabilities and a move away from the diminishing returns of Chinese manufacturing. It has sharp (very sharp) 90º edges. The volume control is motorized as is the ever-turning Tape wheel. The latter records all audio played through the unit and can be turned backwards to repeat anything it has heard over the past two hours. It can also create audio loops from its input, and these can be further manipulated with various key/wheel combinations.

Some design decisions yield challenges to the user. With a limited interface consisting of only two button and two wheels we are forced into unintuitive button combinations to access most features. Input and Play buttons have the same size, shape, and surface. Though they are positioned side by side, a tactile point of differentiation would be useful. The volume wheel’s protrusion makes it susceptible to being moved accidentally when scrolling the always inviting tape wheel. Since the wheel is quite sensitive and as the system is capable of reaching high volumes, this can yield an unpleasant surprise. There is no speaker cover. While this makes for an elegant appearance, it exposes the soft cones to damage.

The radio has a rigid handle that can be rotated to lay it at a slight angle. However as there is no footing and no lock position, the handle can kick out and send the unit falling on its face. When set down on its handle, it seems the unit should go speakers down. This muddies the sound and hides the text labels of the buttons and knobs. If set down the other way, all of the text is upside down but visible…

A deeply felt gap is the omission of an audio output. With so many sound creation features and so much emphasis on meditative states, it is strange there is no way to isolate this experience within headphones or to reproduce it elsewhere.

WISHLIST:

Output jack

More spacing between the two wheels

Another button or two for more intuitive control

Speaker grills (magnetic face — why not?)

Better orientation of the button labels

Allow the handle to move in but one direction (whichever direction the speakers are intended to be)

Power jack on the side rather than in back

USB-C as power source

The Clock-Radio

There is the clock-radio. The clock-radio takes up less space, weighs less, costs less, and works half as well as a clock and a radio. It exists in a strange in-between place of neither and both. A jack-of-all trades and master of none. True the clock-radio plays radio broadcasts better than any timepiece. It displays time better than a radio. And it does these things gracelessly, clumsily, cloyingly, too eager to please, trying too hard…

The Refrigerator

A list of features advertised on a refrigerator:

24.2 cubic feet of storage to hold all your groceries

High efficiency LED lighting

Exterior ice and water dispenser

The upper drawer in the freezer comes out automatically

Increased power efficiency

21.5” Wi-Fi enabled touchscreen

Creates shopping lists

Shares calendars, photos and memos

Streams music and videos

In-home tutorial, where a product specialist will explain all the functions, provide tips-and-tricks, and answer any questions

One year parts and labor warranty

The Desk

I was looking to buy a new desk. I found a fine desk — well-crafted, handsome lines, the right dimensions for its intended space. However, with a single drawer it could not hold much. What good is a desk that cannot accommodate my notebook, papers, pens, pencils, sharpeners and erasers, cables and cords, more papers, and miscellany that finds a place where it will? This question made me consider the purpose of a desk: a desk is there to work upon. The viability of a desk as such is not determined by the quantity of its features but by the fulfillment of its singular function.

My initial question around the storage capabilities of a desk points to a dead end. If I found a desk that could store the things on that list, what about other things? Is it unreasonable to expect the desk to hold a couple of books? Some magazines too? How about napkins and placemats (sometimes I may eat there)? Some silverware? A screwdriver or two (flathead and Phillips) and some other basic tools? Toothbrushes and toiletries? A few articles of underclothes? Maybe an outfit change?

The function is the response to the need. To write is one discrete need. To storeis another. A desk is for writing — the rest is superfluous. A good desk serves its singular function perfectly, without complication or distraction.

Theory as Practice

The process of designing presents manifold distractions. The push to add more and more is strong often coming from multiple directions at once. There is the desire to grant the client’s every whim, to incorporate a flourish or embellishment, to increase and inflate, to implement yet another feature. However, anything that is not fundamental has no place. Anything that is not the direct response to a precisely defined need not only diminishes but works contrary to the design solution.

When I design products for e-commerce I use the 2nd person "You", "Your", “Yours” rather than the 1st person “I”, “My,” “Mine.” This lets us to use imperative language throughout our calls-to-action ("Sign up now!") and to be consistent with that form when asking for user input ("Enter YOUR Name", "Provide YOUR contact details below"). It further allows "us" [the brand] to say things like "WE provide services that include..." and "OUR company was founded..." This is much better than the sterile, sociopathic 3rd person in referring to our own company “THEY provide services that include...”

It is easy to see how this issue can get muddied pretty quickly if we refer to our users in the 1st person and ourselves in the 1st person as well: "(YOU [The user])  Join US [the brand] now. Enter MY [the user’s] name and email address below..."

REFERENCES: https://medium.com/@jsaito/is-this-my-interface-or-yours-b09a7a795256#.qli45gp5r

Somehow drop-down menus still seem to be lingering in web design. There are plenty of plugins and old habits that allow them to perpetuate. But the time has come to make an earnest push into the age of the meaningful interaction.

1. Drop-down menus are inherently not mobile-friendly Limited screen real estate has to be used efficiently. Think about the context of the mobile user - immediate content is more useful than eventual content. Also, there is no hover state on mobile.

2. Drop-downs are highly error prone. Without the user having an opportunity to take a decisive action (click), There is increased room for error.

3. Drop-downs are not part of an integrated UX The drop-down is superimposed on the actual experience of the the site - it is not integrated (unlike any in situ content such as a photo within an article, etc.). The effect can cause users to become disoriented and to feel a loss of control.

4. Drop-downs obscure content The appearance of drop-downs, intentional or not, obscures on screen content.

5. Immediate content is more valuable than eventual content The relatively small advantage of a drop-down is pinpoint arrival at specific content. This can be done more efficiently and effectively with an integrated search or filter function. Even then, this use case is typically relegated to a very small subset of users who know exactly what they want and exactly what content is offered. A bird in the hand is worth two in the bush.

At every product shop there is a see-saw swing between the focus on feature implementation versus experience design. These are naturally complementary pursuits, yet we often find them at odds. 

Is a product that is useful but hard to use better than one that is delightful and pointless? In the former we find Spotify, Snapchat, Jeeps, and immersion blenders - in the latter Tetris, View-Masters, popping bubblewrap, and Tinder. 

The first fallacy is to consider these as mutual exclusive. Form and function act best in concert. Second it is corner-cutting to create a feature and to leave it in a primordial state. Give a blade a handle, attach a keyboard to the hammers on a piano. Lastly consider the perspective of the new user. The user without familiarity of the buried features, with no native sense of how to make the thing perform its intended function - or the misuser and all that could occur in that misuse. 

Considering users’ visual impairments (such as color blindness) allows an experience that can work unconditionally. 

Example 1 (color-differentiated states only)

In the example above the buttons are of similar size and shape. The rollover or selected state is signified only by a change in color. The color selected is of the same intensity as the unselected states - so when we see it in greyscale the difference between the selected and unselected is imperceptible. 

***

Example 2 ( contrast, color, font style, and graphically differentiated states)

To assist visually and cognitively impaired users in accessing digital media, certain practices are being developed. Over the next several posts we will discuss some of the types of disabilities, accessible devices, tactics for providing accessible design, and some critical thought about the impact of a widely deployed accessible web. To begin we identify the two primary standards for accessibility in the United States.

Web Content Accessibility Guidelines

WCAG is developed... with a goal of proving a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

508 Standards

Mass was an experience installation for the Gallery Aferro in 2009. 

The work presented an artificial landscape in sound. Various artists contributed aspects of the sonic environment. Elements moved systematically across the speakers yielding various perspectives relative to the listener’s position and moment of observation.

Each unit was constructed of wood and silk with integrated photo-sensitive light arrays, speakers, and audio players.

Whoever designed the connector of the USB cable was a man who despised the human race, because you can’t tell which way to turn it and you waste minutes of your tiny day, crouched, grunting, trying the half-blocked connector one way and the next.

When we talk about legibility, we refer not only to the possibility of deciphering elusive characters through force of will. This also includes the desirability of reading those characters based on their style and presentation.

Across wide and varied usability testing I have yet to come across a user complaining that a font size is too big.  When having trouble reading through tiny text sizes, some users blame themselves - old age, declining eyesight. The more candid users simply draw the line: "I can't read that!" And so they don't. And they're right not to try.

The user encounters how the words are presented before what the words say. Typography carries a great deal of responsibility. Failing there, the medium may keep us from the message.

Large font sizes, generous leading, and wide margins yield a more pleasant reading experience.

The two following examples show blocks of equal sizes with identical text between them. The differences in text style are called out. 

• Serif font • High contrast (100% black) • Text size <16 points • Single-line leading • Justified type • Minimal margins