Not Signed-In
Which clippings match 'User Interface Design' keyword pg.1 of 2
14 SEPTEMBER 2015

Design for Action: designing the immaterial artefact

"Throughout most of history, design was a process applied to physical objects. Raymond Loewy designed trains. Frank Lloyd Wright designed houses. Charles Eames designed furniture. Coco Chanel designed haute couture. Paul Rand designed logos. David Kelley designed products, including (most famously) the mouse for the Apple computer.

But as it became clear that smart, effective design was behind the success of many commercial goods, companies began employing it in more and more contexts. High-tech firms that hired designers to work on hardware (to, say, come up with the shape and layout of a smartphone) began asking them to create the look and feel of user-interface software. Then designers were asked to help improve user experiences. Soon firms were treating corporate strategy making as an exercise in design. Today design is even applied to helping multiple stakeholders and organizations work better as a system.

This is the classic path of intellectual progress. Each design process is more complicated and sophisticated than the one before it. Each was enabled by learning from the preceding stage. Designers could easily turn their minds to graphical user interfaces for software because they had experience designing the hardware on which the applications would run. Having crafted better experiences for computer users, designers could readily take on nondigital experiences, like patients' hospital visits. And once they learned how to redesign the user experience in a single organization, they were more prepared to tackle the holistic experience in a system of organizations."

(Tim Brown and Roger Martin, 2015, Harvard Business Review)

A version of this article appeared in the September 2015 issue (pp.56–64) of Harvard Business Review.

1

TAGS

Bill BuxtonCharles EamesCoco Chanelcomplex systems • David Kelley • design history • design intervention • design processdesign thinking • design-oriented approach • design-oriented thinkingdesigned artefactethnographic design approachFrank Lloyd Wright • genuinely innovative strategies • graphical user interfaceHarvard Business ReviewHerbert Simon • holistic user experience • IDEOimmateriality • intervention design • iPoditerative prototyping • iterative rapid-cycle prototyping • iTunes Store • Jeff Hawkins • look and feellow-fidelity prototype • low-resolution prototype • nondigital experiences • PalmPilot • Paul Randpersonal digital assistantphysical objectsrapid prototyping • Raymond Loewy • redesignRichard Buchananrole of the designerservice designuser experienceuser experience design (UX)user feedbackuser interface designwicked problems

CONTRIBUTOR

Simon Perkins
23 OCTOBER 2014

AppSeed: interactive prototypes from pen and paper sketches

"AppSeed lets you take your sketches and make them into functioning prototypes, bridging the gap between pen/paper and digital, through computer vision. It allows you to sketch your designs as you normally would and then manipulate your sketches directly on your phone. Unlike similar products, the use of computer vision speeds up the process and understands your sketches. AppSeed can identify an enclosed space in your sketch, allowing you to make it into a button, input text, map, or another UI element. Making your sketch into a functioning prototype running on your phone."

1
2

TAGS

2013app • app prototyping • AppSeed (app) • design options • drawn shapes • functional prototype • Greg Goralski • hand-drawnideas start on paperinteractive elements • interactive paper prototype • interactive prototypes • interface designlook and feel • look and feel options • mock-up • Open Source Computer Vision • OpenCVpaper prototypingpattern recognitionproduct prototype • prototyping app • sketching ideastest prototypeTorontoUI design • UI element • UI elements • user interface designUXvisual screen design

CONTRIBUTOR

Simon Perkins
12 OCTOBER 2014

Less, But Better: Dieter Rams's Influence on Today's UI Design

"Design should not dominate things, not dominate people, it should help people".

(Dieter Rams, Gestalten)

1
2

3

4

5

TAGS

20th century design • Adrien Olczak • Anton Repponen • Awwwards • Braun • Braun Style • Celegorm • Christopher Paul • David Stefanides • Denis Shepovalov • design classics • design inspired by • Dieter Rams • Eder Rengifo • electronic appliances • Eugene Balashov • Filip Slovacek • functionalism • functionalist vision • Gestalten • gute form • Hans GugelotHfGindustrial designindustrial designerinfluential designerinterface metaphor • Joao Pires • Jordi Verdu • Kirill Zhylinsky • Klaus Klemp • less but better • Luca Banchelli • Osme Pietro • Otl Aicher • Peter Behrens • Piotr Kwiatkowski • principles of good design • rationalist vision of design • Simon Alexander • SK2 radio • SK5 • skeuomorphism • TG60 • tone et type • UI designUlm School of Designuser interface designuser interface metaphorvisual metaphor • Vladimir Kovalev • Wilhelm Wagenfeld

CONTRIBUTOR

Simon Perkins
25 JULY 2013

jQuery Mobile: touch-friendly websites for browsers and devices

"jQuery Mobile is an example of the web living up to its promise of everyone having equal access to free and public content posted to the web, regardless of the device they are using. It isn't just for mobile, it's 'mobile–first', NOT 'mobile–only' so it can be used as a base for responsive web design. All those great touch–friendly form inputs and widgets are fully themeable and work great no matter what the device (mobile or desktop)."

(Marc Grabanski, 19 April 2013)

1
2

TAGS

AJAXCSSdesign for the screendigital design • Filament Group • HTML5interaction designjQueryjQuery Mobile • layout engine • Marc Grabanski • mediated interactionmobile • mobile first • mobile first web design • mobile only • page navigation model • Scott Jehl • screen-based interfacetablet interfacetechnology innovationtechnology solution • theme engine • Todd Parker • touch-friendly interface • touch-friendly UI widgets • touchscreen • touchscreen phones • UI widgets • user experienceuser interface designvisualisationweb design • web design ready • web first • widget

CONTRIBUTOR

Simon Perkins
29 APRIL 2013

The idiomatic paradigm of user interface design

"This third method of user interface design solves the problems of both of the previous two. I call it idiomatic because it is based on the way we learn and use idioms, or figures of speech, like 'beat around the bush' or 'cool.' They are easily understood but not in the same way metaphors are. There is no bush and nobody is beating anything. We understand the idiom because we have learned it and because it is distinctive. Pretty simple, huh? This is where the human mind is really outstanding, mastering learning and remembering idioms very easily without having to depend on comparing them to known situations or understanding how they work. It has to, because most idioms don't have any metaphoric meaning at all. Most of the controls on a GUI interface are idioms. Splitters, winders, comboboxes and scrollbars are things we learn idiomatically rather than intuit metaphorically.

We tend to think that learning is hard because of the conditioning we have from the technology paradigm. Those old user interfaces were very hard to learn because you also had to understand how they worked. Most of what we know we learn without understanding; things like faces, social interactions, attitudes, the arrangement of rooms and furniture in our houses and offices. We don't 'understand' why someone's face is composed the way it is, but we 'know' their face. We recognize it because we have looked at it and memorized it, and it wasn't that difficult.

The familiar mouse is not metaphoric of anything but rather is learned idiomatically. That scene in Star Trek IV where Scotty returns to twentieth–century Earth and tries to speak into a mouse is one of the few parts of that movie that is not fiction. There is nothing about the mouse that indicates its purpose or use, nor is it comparable to anything else in our experience, so learning it is not intuitive. However, learning to point at things with a mouse is incredibly easy. Someone probably spent all of three seconds showing it to you your first time, and you mastered it from that instant on. We don't know or care how mice work and yet we can operate them just fine. That is idiomatic learning.

The key observation about idioms is that although they must be learned, good ones only need to be learned once. It is quite easy to learn idioms like 'cool' or 'politically correct' or 'kick the bucket' or 'the lights are on but nobody's home' or 'in a pickle' or 'inside the beltway' or 'take the red–eye' or 'grunge.' The human mind is capable of picking up an idiom like one of the above from a single hearing. It is similarly easy to learn idioms like checkboxes, radiobuttons, pushbuttons, close boxes, pulldown menus, buttcons, tabs, comboboxes, keyboards, mice and pens.

This idea of taking a simple action or symbol and imbuing it with meaning is familiar to marketing professionals. Synthesizing idioms is the essence of product branding, whereby a company takes a product or company name and imbues it with a desired meaning. Tylenol is a meaningless word, an idiom, but the McNeil company has spent millions to make you associate that word with safe, simple, trustworthy pain relief. Of course, idioms are visual, too. The golden arches of MacDonalds, the three diamonds of Mitsubishi, the five interlocking rings of the Olympics, even Microsoft's flying window are non–metaphoric idioms that are instantly recognizable and imbued with common meaning.

Ironically, much of the familiar GUI baggage often thought to be metaphoric is actually idiomatic. Such artifacts as window close boxes, resizable windows, infinitely nested file folders and clicking and dragging are non–metaphoric operations–they have no parallel in the real world. They derive their strength only from their easy idiomatic learnability."

(Alan Cooper, 1995)

Alan Cooper (1995). "The Myth of Metaphor", Visual Basic Programmer's Journal.

1

TAGS

1995 • click and drag • cognitive map • combo box • computer mouseconceptual modelfigure of speechgraphical user interfaceGUI • hard to learn • human-computer interactionidiom • idiomatic • idiomatic learnability • idiomatic learning • idioms • imbued with meaning • interface designinterface metaphor • known situations • learned behaviour • learning and remembering • meaning making • nested file structure • no parallel in the real world • non-metaphoric idioms • non-metaphoric operationsn • pulldown menu • pushbutton • radiobutton • resizable window • scrollbar • synthesizing idioms • tabbed browsing • technology paradigm • user interface design • user interfaces • widget

CONTRIBUTOR

Simon Perkins
Sign-In

Sign-In to Folksonomy

Can't access your account?

New to Folksonomy?

Sign-Up or learn more.