inspiration from the edge: new patterns for interface design

the EdgeEDGE INTERFACES

Inspiration from

Stephen P. Anderson

Free Listing (27)

Ecosystem Visualization (24)

I HAVE I NEED

Usability Capture Software (30)

Sketchboard (31)

Interface design.

CONSULTANT

Interface design.

CONSULTANT

DIRECTOR, UX

Interface design.

CONSULTANT

DIRECTOR, UX

VP, DESIGN

How has the iPhone interface influenced web/desktop application interface design?

http://widowmaker.kiev.ua/checkbox/

THIS PRESENTATION:

New sources of inspiration for interface design

THIS PRESENTATION:

Not as much about interaction design

Where do YOU get ideas for your

interface designs?

DEFAULT THINKING

Just say ‘NO!’ to...

Building an online booking tool for a major airline...

You would look at...

DEFAULT

THINKIN

You would look at...other airline sites!

DEFAULT

THINKIN

You would look at...other airline sites!

and maybe... ?

DEFAULT

THINKIN

DEFAULT

THINKIN

DEFAULT

THINKIN

DEFAULT

THINKIN

No. 5: Look To Other Industries For Innovation

Aer — and only aer — you’ve achieved a basic level of usability hygiene, you can move on to

adding innovative content and functionality to your site. Web strategists need to keep a watchful

eye on the competition, but should look beyond immediate industry rivals for innovative design

ideas.13 Why? Frankly, your competitors may be getting it wrong.14 But, more importantly, your

customers visit Web sites outside of your industry, which raises their expectations about the types of

experiences the Web can provide, expectations that remain intact when they come to your site.

But the universe of Web sites is enormous, and finding inspiring, relevant innovations is challenging.

Follow this structured process to narrow your search and focus on the best practices most relevant

to your own business: · List your site’s strategic objectives. What’s the main purpose of your Web site? Dot-coms

like Amazon.com and eBay exist to create revenue through online transactions, while the

main purpose of other seemingly transactional sites — like some big name retailers and

automotive OEMs — is oen to drive customers to local stores or dealerships. Whether

it’s providing easy self-service or reinforcing your company’s Brand Image, being explicit

about why your site exists will help focus your search for innovative practices.

· Determine specific capabilities that align with your objectives. Compile a list of online

capabilities that support your strategic objectives. For example, if your site exists to drive

online transactions, then it must provide some baseline features, including forms for

entering personal information, privacy and security policies, a transaction engine, help,

and the ability to track the status of a transaction.

· Focus on industries that excel in each capability. Start your search with companies

whose main business goals directly align with each capability that your site needs to

provide. For example, financial services firms should excel at providing privacy and

security information. A quick survey of financial services sites will uncover some

unremarkable duds, but also a few gems, like the well-documented privacy policy at ING

Direct.15 Repeat this search for all of the key capabilities that your site needs to provide.

...look beyond immediate industry rivals for innovative design ideas. Why? Frankly, your competitors may be getting it wrong. But, more importantly, your customers visit Web sites outside of your industry, which raises their expectations about the types of experiences the Web can provide, expectations that remain intact when they come to your site.

"Hunt For Web Innovations Outside Of Your Industry" Forrester, November 3, 2005

DEFAULT

THINKIN

DEFAULT

THINKIN

“This is my toolbox”

“default thinking”

THIS PRESENTATION:

WHAT SOURCES?

Desktop Software

Web Apps

Web Sites

Desktop Software

Web Apps

Web Sites

http://www.slideshare.net/dansaffer/new-sources-of-inspiration-for-interaction-designers

Architecture, Film & Mechanical ObjectsDan Saffer

http://www.slideshare.net/billder/de-rouchey-conversations-with-everyday-objects

Everyday ObjectsBill DeRouchey

http://www.slideshare.net/blackbeltjones/designing-for-spacetime-ixda08

Space-Time ContinuumMatt Jones

http://www.slideshare.net/sarah.allen/cinematic-interaction-design

Cinematic InteractionsSarah Allen

Youth, OnlineAndrew Hinton

http://www.inkblurt.com/2006/04/01/clues-to-the-future/

Social DesignJoshua Porter

http://www.slideshare.net/bokardo/psychology-of-social-design/

Game TheoryKars AlfrinkAmy Jo Kim

http://www.slideshare.net/kaeru/playful-ias-euro-ia-summit-2007

Sci-Fi InterfacesNathan Shedroff & Chris Noessel

http://www.nathan.com/thoughts/MakeItSo.pdf

Desktop Software

Web Apps

Web Sites

http://www.shufflebrain.com/etech06.htm

Desktop Software

Web Apps

Web Sites

THIS PRESENTATION:

WHAT SOURCES?

Interfaces that are often overlooked or go unnoticed

3 Quick Comments

psst... I’m trying to get ahead

of the “yeah, but...” comments

3 Quick Comments

trying to get ahead of the “yeah, but...” comments

1. With new technologies, almost anything is possible!

INTERESTING CHANGES...Hardware

INTERESTING CHANGES...Software

PrismCloud Computing

3 Quick Comments

2. Natural behaviors are superior to learned behaviors.

A scrollbar, really?Why are we pulling down to move a document up?

http://flickr.com/photos/wendycopley/1424586876/

3 Quick Comments

3. ...except where the learned behavior actually makes me feel (and perform?) better.

3 Quick Comments

3. ...except where the learned behavior actually makes me feel (and perform?) better.

Anything you want to, do itWanta change the world?There's nothingTo it

-Willy Wonka

CONTEXT:(Where this became important...)

Project

“Crazy Quilt”

Project “Crazy Quilt”

“Project Crazy Quilt”

integrate dozens of existing applications(some web based, some desktop)

each with wildly different UIs, some redundant functionality, and no information architecture

support power users & newbies, small businesses, as well as enterprise companies!

be infinitely customizable at the user & business levels

deployed worldwide to broadbandand dial-up clients

(and so on...!)

INTERFACE CHALLENGE:

How do we ‘stitch together’ a dozen independent applications?

SUGAR OS FOR THE XO LAPTOP:

(Video demonstration of the Sugar OS)

Connection?

Connection?“Hub & Spoke”

Area 1 Area 2 Area 3 Area 4 Area 5

Option 1

Option 2

Option 3

Option 4

Option 5

Options 6

Where I am.

Area 1 Area 2 Area 3 Area 4 Area 5

Option 1

Option 2

Option 3

Option 4

Option 5

Options 6

Where I am.WRONG PATTERN

FOR APPLICATIONS!

Where I started

Where I came from

What I can do next

Where I am.

Navigation! Activity Focused

Building Interiors, Caves,

Geographical Places

Persistent Global Controls

Geographical Places

Map, News, Character Stats

Geographical Places

Various Applications

Plug-Ins, related tools

Global Popups, Profile,

Navigation, News

Context-Specific Tasks, Contextual

HelpGames

Geographical Places

Various Applications

Plug-Ins, related tools

Global Popups, Profile,

Navigation, News

Context-Specific Tasks, Contextual

HelpGames

Geographical Places

TAKEAWAY #1

Look Beyond the Surface.

How do we accomodate all levels of users & deep customizability?

TAKEAWAY #2

Think Outside the (UI) Box.

http://www.adobe.com/products/air/

Learning from Games: HCI Design Innovations in Entertainment Software

Jeff Dyck1, David Pinelle1, Barry Brown2, and Carl Gutwin1 1HCI Lab, Deptartment of Computer Science

University of Saskatchewan Saskatoon, SK, Canada, S7N 5A9

[email protected]; http://hci.usask.ca

2Department of Computer Science University of Glasgow

Glasgow, Scotland [email protected]

ABSTRACT Computer games are one of the most successful application domains in the history of interactive systems. This success has come despite the fact that games were ‘separated at birth’ from most of the accepted paradigms for designing usable interactive software. It is now apparent that this separate and less-constrained environment has allowed for much design creativity and many innovations that make game interfaces highly usable. We analyzed several current game interfaces looking for ideas that could be applied more widely to general UIs. In this paper we present four of these: effortless community, learning by watching, deep customizability, and fluid system-human interaction. These ideas have arisen in games because of their focus on user performance and user satisfaction, and we believe that they can help to improve the usability of other types of applications.

Keywords Computer games, game interfaces, user communities, interface customization, interface design

INTRODUCTION Computer games are an enormously popular and successful type of interactive software. This success has occurred even though game interfaces and interaction paradigms are very different from those of other applications. Because of their focus on system performance over consistency, games have nearly always ignored the windowing systems, the standard widget libraries, and the toolkits that define the look and feel of conventional systems. In this way, game UIs were ‘separated at birth’ from their siblings, and grew up in a very different design environment.

In particular, this environment does not place restrictions on how things must look or how interaction must be carried out with the user, but it does strongly reward innovation and performance. The driving forces in game design are user performance, satisfaction, and novelty: gamers have come to expect new, cool features that they have never seen before, features that help them play in more efficient and more interesting ways. As a result, games have both become early adopters of new HCI technologies as well as innovators in the area of HCI interaction design.

Examples of early adoption are many, and include transparent overlays in Diablo II (studied in [2]), transparent menus in Everquest ([9]), radar views in Warcraft ([8]), gestural commands in Black and White

([18]), speed-coupled flying in Grand Theft Auto ([16]), and radial menus in Neverwinter Nights ([11]). However, games do not just adopt; the competitiveness of the market and the expectations of the player communities lead game designers to produce both variations on old techniques as well as completely new ones. This paper is about the innovations that have grown up entirely in the game world – techniques and approaches that can now help to advance the design and usability of conventional applications.

HCI researchers have considered games before: in the early 1980s, Tom Malone looked at what makes games compelling and how these properties could be applied to applications [14]. In the ensuing 20 years, however, games have evolved enormously, but their progress has gone largely unnoticed. A second look at the design and interaction innovations – this time in modern games – was long overdue.

We have taken this look by carrying out a design review of fourteen state of the art PC games from several genres. Our goal was to identify novel contributions that provide clear benefits to users in game domains, contributions that could be also be employed to help improve usability in conventional applications. In this paper, we introduce four of these innovations: ! effortless community – games make it easy to form,

join, and participate in communities of users; ! learning by watching – games help people learn the

application by watching ‘over the shoulder’ of more experienced users as they work;

! deep customizability – games give users the power to modify and extend any aspect of the UI, and allow them to share those modifications with others;

! fluid system-human interaction – games communicate information to users in ways that do not demand the user’s attention and do not interrupt the flow of work.

Even though games are often seen as being “just for kids” or “just for entertainment,” games have had to address many of the same interaction and interface issues that affect more conventional systems. The design ideas that we present below are eminently applicable to everyday situations with regular software; and we suggest that reuniting the separated siblings can have distinct advantages for both software usability and HCI research.

hci.usask.ca/publications/2003/games-gi03.pdf

How do we accommodate multiple workspaces?

Tabbed navigation

Minimized documents

http://www.pr0jects.com/portfolio/#varywell

Are there better ways to display search results?

STANDARD TEXT RESULTS TAILORED RESULTS ON VIEWZI

http://www.viewzi.com/

http://www.aaronjasinski.com/

inspiration from the edge: new patterns for interface design

Technology