Steven Hoober - 4ourth Mobile4ourth.com/downloads/StevenHoober-Portfolio.pdfSuper Freakonomics:...

5600 Russell Avenue / Mission, Kansas 66202 / +1 816 210 0455 / www.donttouchme.com / [email protected] / @shoobe01

v

Steven HooberMobile Interaction & Interface Design • Information Design • Graphic Design

PortfolioOctober 2011

Weather Channel Mobile

Overland Park, KS (66206)

119°5


CONTENT

119°

CONTENT


119°


v Steven Hoober Mobile Interaction & Interface Design • Information Design • Graphic Design

2

A complete, almost clean sheet of paper design for -- depending on who measures it -- the most visited mobile website in the US. A whole new information architecture was developed, which included the content of the entire desktop website, redesigned for mobile needs and contexts.

This was a replacement for an existing site, and also had to be designed to reduce the page size, to improve access to all the site information, and to increase the prominence and relevance of advertising.

Lead Interaction and Graphic Designer with a small team of junior designers. Implemented by client developers.

Overla

nd

Park

, KS

(66202)

Ente

r a n

ew

loca

tion...

Search

Recen

t locatio

ns:

See m

ore

locatio

ns

Toro

nto

, ON

, Canada

Atch

ison, K

S

Colu

mbia

, MO

Law

rence

, KS


6 alerts in your area

119°

Pollen

Pollen Forecast:Grass MediumTree Low

Forecast

Local radar

Map Center

Partly cloudy - Rain

78°

Holiday weather

Cold and mostlyclear with achance of icenext week

Christmas eve:Low 38°Clear

5

3GAT&T 3:27 PM

The desktop Weather.com website.

A mockup of the high-resolution, WebKit (e.g. iPhone) version of the Weather.com mobile website.

Model of the entire information architecture.

Masthead for each of the three device classes the design included.



3

Copia – Multi-Channel Social Reading

3GAT&T 3:27 PM

The LightningThief

Rick Riordan

My Library (27) View all »

Outliers: The Storyof Success

Malcom Gladwell

Me Talk Pretty One Day

David Sedaris

Super Freakonomics: Global Cooling, Patr...

Steven D. Levitt

10 15

Alison finished reading this book Alison Rogers finished reading “The Road” 20 minutes ago

Do we really have to read this chapter? It seems irrelevant to the class, unless I am mi... Allan Swayze created this note about “Communication Theory/Uncertainty R... 4 minutes ago

Communication Theory

Charles Berger

Started 11/23

All Currently Reading Just Finished Notes & Highlights Groups Friends

Dashboard

Settings

Catalog

People

Library

Groups

NotebookHelpConversations

?

Read p.92Read p.187 Start reading Start readingStart reading

View note

View note8 (22) 3 (9) 4 (22) 16 3

Notebook OldFriendsReading

GoSearch...

5 Allan Swayze said “The only way to under...

Back

Close

Copy to my notebook

Copied 17 times

Tags:

theorists who pioneered the research of uncertainty reduction in commu-nication. Their work is crucial to the development of the field of interper-sonal communication, and is central in our understanding of interpersonal processes.

Defining UncertaintySince uncertainty has been identified as an important construct, necessary to the study of communication, it would be beneficial to know when the concept originated, and how it has been defined and studied. One way to consider uncertainty is through the theoretical framework of information theory. Shannon and Weaver (1949)† proposed that uncertainty existed in a given situation when there was a high amount of possible alternatives and the probability of their event was relatively equal. Shannon and Weaver related this view of uncertainty to the transmission of messages, but their work also contributed to the develop-ment of URT.

Berger and Calabrese (1975) ad-opted concepts from the information theorists as well as Heider’s (1958) research in attribution. Berger and Calabrese (1975) expanded the concept of uncertainty to fit inter-personal communication by defining uncertainty as the “number of alterna-tive ways in which each interactant might behave” (p. 100). The greater the level of uncertainty that exists in a situation, the smaller the chance individuals will be able to predict behaviors and occurrences.

During interactions individuals are not only faced with problems of predicting present and past behaviors,

192193

192

“...development of URT.”Marked by Allan Swayze Yesterday, 11:14p

From the Wikipedia entry on this: Uncertainty Reduction Theory was introduced in 1975 in a paper entitled Some Exploration in Initial Interaction and Beyond: Toward a Develop-mental Theory of Interpersonal Communication. This theory, a collaborative effort of Charles R. Berger and Richard J. Cala-brese, was proposed to predict

Previous Next1 of 3

Communications_Theory School

Assigned_Reading

History Menu Communications Theory & Uncertainty 192 / 859

A wireframe of the desktop browsing experience, and note taking on the on a Windows desktop.

Mockups of the e-Ink reader showing browsing, reading and the almost identical reading experience as finally launched (here, on a Windows 7 Tablet).

Six months before the iPad was announced, I was hired to help an interactive agency develop a complete experience for an e-Ink based reader, and all other access points (web, desktop, mobile, etc.) to the system.

The design evolved into a social product, more than a simple reader, and every detail was designed to comply with this and a small number of other design principles.

Lead Interaction Designer with a team of designers. Worked in close cooperation with creative, marketing and development. Some influence on hardware and firmware development. Hardware never launched, but on iPad, Win7 talbets, as well as desktops.

Communication TheoryCharles Berger

Outliers: The Story of Suc... Malcom Gladwell

The Lightning Thief (Perc... Rick Riordan

Super Freakonomics: Glo...Steven D. Levitt

Me Talk Pretty One DayDavid Sedaris

Communication TheoryCharles Berger

Details Cont. p 152

A mockup of the experience on the (yet to be launched) handset interface.

The annotation experience as launched on the iPad.

Concepts, Technology Exploration & White Papers

Just pick up your phone and glance at all the information you need to start your day.

The mobile widget way:

NOR PIT1 0 72 0 103 - -4 - -

0 17

HALF

Drive details

2&10 PIT 21 :28 SV.Haynes left guardto PIT 28 for 7 yards

NO

RPIT

Play details

Current Game Current Stats

PittsburghSteelers (0-0)

Passing:B. St. PierreB. RoethisbergerC/ATT YDS AVG2/3 73 24.3

Player details

C. BatchB. Randall

Entire Team

Rushing:C. DavisG. RussellL. CroomN. DavenportK. Barlow

MainMenu

Video: MichaelIrvin's Hall of Fameinduction speechMenu Main

Coming into their own

Current scores: NOR 0 PIT 17 (half)...My teams: Dolphins O-line learning...Top stories:

The Brownsare lookingmore like asolid teamnow, butthere's stillsome workahead.Full story

Browns preseason primerTucker suspended four games for...Kirwan: Guaranteed money for un...Training camp index | Camp dates



4

With a broad background and reputation for quick turnaround and deep exploration, I have been tasked with a number of conceptual projects.

These have run the range from exploratory designs of major products to determine scope and effort, to technology white papers, to help set the five-year direction of chipset design and manufacturing.

Led design, generally drew concepts myself, and wrote the bulk of the presentations or technology positions.

Illustration of augmented reality from 2007.

Portal for NFL content, here showing real-time results (lower left).

A publicly-shared widget concept.

A diagram of the basic technology behind a new display/input concept.

Sprint User Experience Design | Proprietary & Confidential

The EL display is programmed or printed to indicate icons onlywhere there are underlying physical switches, yielding theinteractivity of a touch screen with much lower cost, sometactile feedback and less sensitivity to inadvertent contact,dirt and liquids. The need for pressure makes it particularlysuitable for use on a phone, which may contact parts of theuser’s body in normal use, but when no keys should be pressed.

UEI’s Kameleon Technology

The EL/LED used in UEI’s current products has somedisadvantages in that it is essentially inherently monochromatic,and is fairly low resolution, so high-quality graphics arepermanently printed on the screen (then are illuminated asneeded).

Other technologies just entering production may be moresuitable for the display component. “Digital inks” would continueto be one color, but promise to be printable on a variety ofmaterials and could therefore be as flexible and durable asdesired. OLEDs (especially LEPs) promise full-color displays ina similar format. There may be additional emerging or futuredisplay or sensing technologies (e.g. F-Origin’s HaptiTouch)that could be employed to achieve the same result.

The input panel will probably need to remain flat, due toprohibitive cost of manufacturing curved printed circuit boards.Screens should not need to be rectangular, or require largebezels, allowing greatflexibility in design of thesurrounding hardware.

Button

Label

Filter,LCD, EL

ButtonCircuitry

ButtonCover

Kameleon display as usedon the UEI-made Radio

Shack 15-2133 A/V remotecontrol

A flexible EL (electro-luminescent) backed one-color LED displayis placed over a pressure-sensitive switch panel.

Portals & Account Management

Print on Demand Hallmark Digital Connecting 9 September 2009

©2009 Little Springs Design » Proprietary & Confidential 9

Your Favorite Cards See all

Card TitlePreview

Personalize

Tag | Tell a Friend

Hallmark.com User Profile Page – Authenticated User

Connections

Hallmark Print onDemand Mobile andDesktop Apps.

Welcome, Jenny

Jenny JohnsonHallmark Gold Crown Member

It’s been 14 Days since you were here last; we’ve missed you! Check out all the new cards we have in our Holiday category, just in time for Fall, including Halloween, Thanksgiving, and more.

575 Fans

1,200 Gold Star Ratings

57 Public Card Submissions

Top rated card:

Jenny’s fans

View Yearly CalendarView Address Book

Download Desktop Widget:For Mac | For PC

Follow us on:Facebook | gmail | TwitterLinkedIn | classmates.com

View all Mobile Apps

David

Johansen

Howard

Jones

Jimmy

Johns

Your Latest Notifications See all

Dad received his Birthday card on Tuesday the 23rd

18 new RSVPs to your party on the 17th of September

Monica has sent you a Thank You note for your gift

Your Current Stats See all

Your cards have 150 new stars | View details

You have 150 cards in Your Favorites | View all

You have 300 new Gold Star Points | View details

Your Fans’ Posts See all

“My Favorite Cards” by Bethany M, posted 8:25 this morning

“Printing on Demand Success” by Markus K, posted 11:57PM

“What do you get for...?” by Sherman H, posted 8/29/09

Card Title

Price / Size

Preview

Save for Later

Personalize

Add Contact Find Contact

What’s on your mind today?

Your Posts See all

“All I want for Christmas”, posted 8:27 this morning

“What’s the big idea?”, posted 11:50PM

Cancel Submit

September

View all

What kind of card am I looking for?

Keywords

Paper

Photo

Sound

Invite/Announce

Search cards

This card is for:Mom’s Birthday

More options



5

Sprint Government My Account Products & Services Support Search Business Go

© 2005 Sprint Nextel. All rights reserved

Your Privacy Rights | Acceptable Use Policy & Visitor Agreement | Copyright Notices | Find a Store | Contact Us

Welcome

Network & Service

Equipment & Hardware

Billing

Reports & Alerts

Self-Management

Sprint Government Account Management

Notice:All internal Sprint users must access this site using Government-ApprovedSession Security. Government-Approved Session Security (FIPS 140-1Compliance) is currently available only using a specified browser.For use by authorized users only. Use of this system constitutes consentto monitoring at all times.

2 steps completed ViewSteven Hoober - FDA-CDER, BusinessProcess Support

shoobe01 | Sign off

• Where are my networkdevices located?

• How can I add a delegate?

Need Help?

• View all help topics

Need more help?• Contact Sprint

Call 1-866-866-7509• M-F 8am-midnight ET• Sat-Sun 10am-9pm ET

GoTop topics

Recent status changes:5 trouble tickets closed2 trouble tickets escalated

Search for items:

Trouble Tickets

Number or date Go

> Create an instant alert• Create a new automated

alert

Search the alert archive:

Alerts

Enter search terms Go

• Change your password• Change your contact

information• Relocation or life change?

> View your complete profile

My Pro�le

Total Inventory:86 Wireless Devices125 Phone Cards23 Routers & Switches11 Data Service Plans

• Search the inventory> Manage your inventory

Inventory

$81.697 Amount due4/29 Due by• View current invoice• View invoice history

Disputes:• Dispute a charge• View dispute history

Billing

Select a single user profile tothe left then select to move ormodify it:

User Management

DHHSFDA

zelph77aroge03reded74clandes01CDER

OBPSmatvano

Or, pick another task:• Add a new profile• Select multiple profiles• Move multiple profiles

View Pro�le

> Move profile

Enter search terms Go

Recent Reports:• VoIP Latency, July• Data Storage Availability• Unused Bucket Minutes in...

Reporting

View all reports:

VoiceVoIPDataWireless Go

• Manage location applications• Manage your device list> View all business mobility management functions

Business Mobility Management

View & Manage Your Network:• Monitor network status• View network topology> Manage your network services

Network Management

Save money and improve your network:The Sprint Networx Optimizer can find new ways to get the most outof your current configuration. Find our how.

Service Features:• Current configuration details• Modify feature sets• Add services

Shop Digital LoungeMy Sprint Support SearchSearch Sprint

Overview | Phone & Plan | Billing & Payment | Settings & Passwords | My Online Tools | My Content

Your Privacy Rights | Acceptable Use Policy and Visitor Agreement | Copyright Notices | Find a Store | Contact Us © 2006 Sprint Nextel. All rights reserved.

Welcome Back to My Sprint Signed on as Steven Hoober| Sign off

Text MessagingRecipient phone number

Your message

> Open Text Messaging

My Online Tools for 816-210-0455 View My Online Tools

Improved coverage nearbySprint has improvedyour local coverage.> View maps

Are you getting your discount?Sprint offers discountservice to employees ofmany companies.> Check eligibility now

Picture MailThere’s no better way tocapture special moments thanwith your camera phone andSprint Picture Mail.

> Open Sprint Picture Mail

My Phone & Plan Account: #1002125221251 > View coverage in your area

Learn about your Picture Mailadd-on

Learn to avoid overages

2 Ringers View all

3 Screen Savers View all

Call Tones Visit Call Tones

1 Application View all

Search for content:

Shop for New ContentBrowse, preview and purchase ringers, music, games and much more.> Visit the Digital Lounge

Games Ringers Music

Alerts

Bill BalanceRecent Payments

Total DuePay By

$74.24$21.00

$55.24 January 25

Billing & Payment > View latest bill

Account Information for:

816-210-0455 | Add custom name Fusic™ by LG®

You deserve it. As a loyal customer, we want to rewardyou with big savings on the newest and most innovativephones.

You could be eligible for up to $150 savings on a widevariety of Sprint phones.

> Check your savings now

Go ahead, get your rewardSprint rewards your loyalty with the

New For You TM Upgrade Program

Pay Now

Check your usage trends andoptimize your plan.

> Sprint Plan Optimizer

Are you on the bestplan?

Pats’s Phone | Edit name 816-210-0468

PM-A840 by Samsung® Phone info

> Learn about your phoneChange phone

> Buy accessories

816-210-0455 | Add custom name Fusic™ by LG® Phone info

Add another phone & plan — Find out more about how to save when you add all your phones to Sprint.

Add a phone — Share minutes amongst all your phones with a Sprint Family Plan

> Save $75 noworWait until 12/1to save $150Learn how...

> Learn about this phoneUpgrade phone

> Buy accessories

> Save $75 noworWait until 12/1to save $150Learn how...

> Learn about this phoneUpgrade phone

> Buy accessories

My Account - #00005634455

200 Minutes Included247 anytime minutes used451 text messages used

Sprint Fair & Flexible 200 > Usage details > Plan details

Change plan

Add a phone to share minutes

Change plan add-ons

Estimated usage as of 12/26/2006. Actual billmay vary.


Change plan


Change plan add-ons


Change plan


Change plan add-ons

Portals are a whole ethic of interactive design, all about progressive disclosure and appropriate degrees of information, pro-active help and ease of use. And, they should work with mobiles, kiosks, even printouts. However your customers engage, the portal has to help.

Misunderstanding portal theory leads to task failures from complexity, or exposing customer information. Successful portals, like these, are used by millions of customers every month, for years on end. And, they can be updated as new features, new products and new brand needs emerge, without clean-sheet redesigns.

Lead Interaction Designer for whole product and many components. Team of other designers leading certain components.

A series of portals designed for Sprint. I led design on four revisions over 7 years, inclusing the last (and still current) framework, as well as several B2B, B2G and telecom manager derivations.

One of a series of interactive products under the MyLowe’s banner, providing “omni-channel” management and planning of your home improvement.

A portal concept (all data still not fully-realized) for Hallmark Cards.

Mapping & Location Services

Power Network Coverage ToolConcept DesignUser Experience Design | Service Design

Sprint User Experience Design – ©1999-2007 Sprint-Nextel Corp. | Proprietary & Confidential

3 Display Paradigms B> Map Layers

My CoverageAnonymous:• SignonAuthenticated:• Tabs as relevant

from otherdrawers...

Voice• Sprint PCS• iDen• PowerSource

Data• EV-DO• Sprint PCS “Data”• iDen “Data”

PTT• PowerSource• iDen

Selection Map LayersSprint-CDMA CDMA Roam CDMA Future EVDO EVDO Roaming EVDO Future iDen iDen Future Hybrid Hybrid Roam Hybrid Future

Tabs may be freely added as additional services are offered.



6

Information visualization is a key method of turning the vast quantities of information the modern world gives us into sensible, useful information. Well-designed visualization systems help with identifying patterns, and applying difficult-to-grasp concepts to the real world.

The first US wireless operator to present a really usable, interactive coverage map. I condensed some 30 types of radio signal, and a range of billable services – many of which conflict with each other – into a task-based set of graphic and text representations of the imformation that customers can directly use to make decisions about purchasing and use of their services.

Lead Interaction Designer for whole product. Worked closely with Sprint MapInfo data store and web development teams.

Address ConversionAddresses entered by the customer will be cleared, and once a valid addressis found or selected, the corrected, complete address will be displayed intext in another location

Coverage details for:5600 Russell Ave, Mission, KS 66202 > Modify

Start over

Sprint also offers International Roaming coverage around the world > Learn more

Map a location:

5600 Russell

Enter as much information as you can or want to. Recent Searches

City:

Address or Intersection:

66202Zip: Map it!State:

MyCoverage

Geocode, Process, ...WiMaxSprint PCS

DataNextelData

Almost every Sprint device offers some connectivity to youremail, the web or a variety of Sprint Vision services. We alsooffer plug-in cards and computers with broadband connectivityso you never have to be off the network. > Learn more

BroadbandEVDO

Data, Email &Multimedia

VoiceCalling

MyCoverage

WalkieTalkie

BroadbandAll current Sprint PCSphones and data cards areEV-DO devices.

Data speeds up to 3.1 mb/s> Learn more

Sprint broadband coverage

Roaming – limited access to someservices

Planned future Sprint coverage

Closed Drawer

Open Drawer

Current production website

Portion of original wireframe

Addresses are converted with as little user input as possible.

Chart depicting types of coverage, mapped to branded labels.

Mobile Consumer Applications



7

The Thwapr any-device video sharing service.

A service for retail stores to bring their products to mobiles, with in-store SEO in mind.

Hallmark Mobile Greetings.

Regardless of business models, applications are simply required for certain types of interactivity, or access to customer information. Since before smartphone was a household word, I have been designing for mobile applications, and have now worked in Android, iOS, Blackberry, WebOS, Windows, and Bada, as well as Brew and J2ME.

Apps are just one side of the coin, and all these products had mobile and desktop sites developed at the same time to support at least seamless installation, registration and marketing.

Lead Interaction Designer, worked closely with clients, client developers to implement, and in some cases with client design teams.

3©2008 Little Springs Design & Tarsin » Proprietary & Confidential

Hallmark Mobile Greetings Detailed Interface Design Document August 13, 2008 Version 081308

A Main Application Interface > i Home Screen

SelectGreetingsMailboxFavoritesHelpSettingsExit

Softkey (Options menu):

Audio:Scrollingfeedback

GREETINGSGREETINGS

Subtitle lineDescriptive Sku TitleFEATURED:

Gre

etin

g

Category

Category

Category

Category

Category

Browse Greetings

Subtitle lineDescriptive Sku TitleFEATURED:

A1a Default ViewWhen launched: super-category icons & the upper levelhas focus – as soon as the icons load, they slide left orright one or two positions then come to rest (introtransition).

When the user scrolls sideways, this brings other super-categories in focus. The lower promo/peek box changesto reflect content for the selected super-category.

On re-entry from another part of the application, thelast-visited state is preserved and immediately presented.This includes both the super-category selection and anypromoted content in the peeking box below.

PreviewSendAdd to FavoritesHomeHelpSettingsExit

Softkey (Options menu):

Remove from favoritesConditional, basedon current state

A1b Promo/peeking ViewWhen the user scrolls down, this activates the lowerpromotional area (the promo/peek box from A1a)showning content related to the currently selected super-category.

The box changes from visibly inactive to active viabackground colors, size and position. Icons and linksbecome visibly active. Additional information is revealeddue to the additional size. The single call to action ishighlighted and becomes the default choice.

Scrolling sideways will move super-categories. Whenthe next is acquired, the promo box will still be in focus.

A1 to B3 TransitionFull screen slides to the left with newscreen sliding in beside it (same ascard slide transition). Need to have harddivide between screens to visually indicatea break. Optional: 1-background remainsfixed with screen elements sliding over it.2-Softkey icons could disappear whenfirst screen begins to slide, then re-appearwhen new screen is in position.

Subtitle lineAdditional informationTags, esp. if featuredSound or animation notes

Descriptive Sku TitleFEATURED:

Preview

5©2008 Little Springs Design » Proprietary & Confidential

MVDI Thwapr Design Style Guide August 12, 2008 Version 081208

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis

2 Page Grids > Dimensions, margins, gutters, paddingThe grid – or arrangement of margins, columns and gutters – is the base upon which all other styled elements are built.

The grid is best communicated graphically; please refer to the example diagrams below. Note that while the same number of elements (e.g. left and right gutters) are present in all designs, the sizes of some of them will change.

Absolute vs. relative – As a general rule, when specifying items for use on a mobile device, relative measures are best. Use percents, ems, and so on instead of pixels or any physical measurements (e.g. inches).

However, margins, padding, and other spacing should generally be specified in pixels, as shown below. This will fail some validation engines, but is allowable.

Rules <hr> and borders, should always have their thickness specified in pixels as well.

One column – Since this design is to be used, without significant change, across all mobile devices, the overall design is one column only.

The only variation on this is for the video/image thumbnails, which are floated to the left of the descriptive text. The gutter between these elements (padding on the floated graphic) is shown below.

Image sizes – Three types of images (aside from special case icons and the logotype) will be used throught the service:

• List thumbnails – In a series of items, floated to align left, next to text labels.

• Display thumbnails – Previews and animated gifs, that fill the page. Aligned left, with content to the right as space allows.

• Other images – These are used for supporting text-based content, as in help documentation, and are generally floated to the right of content.

Each of these is specified for the two size classes used throughout this document. See the sample images, and the chart below.

Note that due to varying aspect ratios, all thumbnails should be cropped to be square.

10px

10px10px

Page title10px

10px

10px

Dog Playing (5:07)

New Puppy (2:43)

Beautiful Flowers (3:12)

Rush and Roll (1:23)

Family Event (0:55)Left Right

10px

177px or largerShown on 240px wide screen

Playing in the field...(2:23)

35pxx

35px

Obcaecati non provid-ent, simili-que sunt in culpa, qui officia deserunt mollitia animi, id laborum et dolorum fuga. et harum quidem rerum facilis est et expedita distinctio.

Temporibus autem:•Quibusdam et aut officiis

debitis aut rerum necessitatibus saepe eveniet.

•Ut et voluptates repudiandae sint et molestiae non recusandae.

Page title

Left RightPage title

176px or smallerShown on128px wide screen

5px

5px

5px

5px

5px

Playing i...(2:23)

Dog Play...(2:23)

31-40 of 44

20pxx

20px

Page title

No larger than75px inany dimension

No larger than50px inany dimension

10px all around

5px allaround

Thumbnail Other ImageScreen width List Display Images Margins

176 or smaller 20px 120px <=50px 5px

177 or larger 35px 175px <=75px 10px

31-40 of 4431-40 of 44

Mobile Web Browsers

News, Travel, ...d - USATODAY.com

3:06 PMAT&T 3G



8

I have designed part or all of several mobile browsers, for widely varying clients. Each has it’s own needs based on the desired market or specifics of the technology used, as well as the changing competitive landscape.

The basics of browsing are the same for all mobile users: task-based, and focused on re-use. Details of history and back behavior, for example, must be specifically addressed.

Lead Interaction Designer, alone or with teams of junior interaction and graphic designers. Implemented by client developers.

Several screens for browsers produced or in progress, from oldest to most recent.

66202 Weather f... 8 min

Pollen count for... 20 min

Pollen alert 22 min

66202 Weather... 2 days

National & Local 2 days

Welcome to the... 2 days

3 42

11 min ago

Link from SMSSee message

15 m 2 h

13

27 m9

1

4

1

1

55 min ago

Browsing Timeline

New History

3:53PM

Shlock Mercenary, by Howard ...

3G

3:52PM

1

4ghi

2abc

5jkl

8tuv

0+

3def

#*7pqrs

6mno

9wxyz

3GAT&T 3:27 PM

Services & Secure Design

Green/white capsule inWhite pill box, wed morn“Take with water”---------------------------------

Take 1Zolotran

200 mgDr. RevelsCVS Pharmacy...

I’m done (next)

Not yet

1 of 3

Audio:Onload: Infoloaded

Video instructions

Replay instructions

Options Done

Onload: Voice“Take 1 Zolotran200 mg green andwhite capsule. Takewith water.”

1

2

4

3

Order a refillHomeMy MedicationsMy PharmaciesMy Pill BoxesPill BookSettingsExit

Softkey (Options menu):B16A1C4/C1A18/A19C9/C7E1D1{Exit}

CHK-B6

CHK-B7

{Replay Audio}

B18

Progress barShows current position(as fraction of totalinstruction sheets)graphically, and as countout of the total.

Medication detailThis is identical to that onthe single med reminderdescribed on B10

B2 Message AttemptedIf the recipient device was previously registered so aJava-push message was sent, but the application didnot contact the server in a reasonable time, a plain SMSis sent to entice the user to reinstall the application. Thepresumption is that the m-greeting application was de-installed, or a device swap occurred.

Options Back

A medication reminder wassent, but the Pill Phoneapplication did not run, andmay need to be re-installed.

Please download theapplication to continue:

http://mobile.pillphone.com/new.php?af1309e

Text MessageFrom: Pill Phone



9

New, enterprise-wide authentication scheme, for Sprint, which complied with new regulations, launched ahead of schedule and is still in service five years later.

This medication reminder tool is designed to install automatically, and to send SMS when the application fails to handshake. Getting the message is critical.

Accessibility, mobile compatibility, reliability, and security cannot be tacked on at the end, but must be baked into products from the beginning.

Or even earlier. I helped influence FCC changes to the CPNI regulations, then implemented a system that used those to best advantage.

I have worked on other secure or high-reliability systems, and am familiar with services like SMS, over-the-air activation and remote locking/wiping.

Lead Interaction Designer. Worked closely with data architects, network, and software engineers to implement.

Process, Documentation & Design Leadership

4Elements, unless noted, shared under Creative CommonsAttribution-Share Alike 3.0http://creativecommons.org/licenses/by-sa/3.0/

HandsetSpec-2010aug11 Saved on 11 August 2010 at 8:58 PM ©2010 Little Springs Design

!"##$%&'()"*+,&-%,"+*!"!#$%&'()!*+!,-(./0.$)/1%!21.34(%)!,$4-5(

1278 Placing and Receiving Voice Calls — Principal Elements and Processes

1280 Dialing a Voice Call

1379 Receiving Voice Calls

1343 Active Voice Call

1328 Connecting a Dialed Voice Call

3713 Three-Way Calling

2016 Call Waiting

App

licab

le U

I Req

uire

men

tsSe

e fo

llow

ing

page

s fo

r lis

ted

requ

irem

ents

St

ates

& P

roce

sses

Elem

ents

dis

cuss

ed h

ere

Oth

er e

lem

ents

A

ctio

n pe

rfor

med

2 Dialer State match

7 Call Waiting Incoming

11 Call Waiting In-Progress

8 Connect a Three-Way Call

9 Contact selection

10 Three-Way In-Progress

3 Dialer Contact matches

Number in focus in History, Contacts, etc.

1 Dialer First entry

!"

[TALK] [TALK]

3108: Forked Dialog2565: Contacts Widget

!"#$""" 5 Receiving


2524 Active Call Widget3108: Forked Dialog

2565: Contacts Widget 3108: Forked Dialog

%&!$"""$&'()

!"##$%&"

'$(()*+"(,---

../01/23

4 Connecting 6 In-Progress

2565: Contacts Widget 2524 Active Call Widget 2524 Active Call Widget2524 Active Call Widget

2524 Active Call Widget2524 Active Call Widget3578: One-Dimensional List

11Elements, unless noted, shared under Creative CommonsAttribution-Share Alike 3.0http://creativecommons.org/licenses/by-sa/3.0/

HandsetSpec-2010aug11 Saved on 11 August 2010 at 8:58 PM ©2010 Little Springs Design

!"##$%&'()"*+,&-%,"+*!"!#$%&'()!*+!,-(./0.$)/1%!21.34(%)!,$4-5(

3719 Placing a Voice Call (Continued) Contact List Matching

1414 Dialed Number Contact List Matching1415 Dialer Number Matching

From the Idle Screen, during manual entry of a Phone Number, as soon as a Number Match is found, a Dialer Number Match Pop-Up Dialog will be displayed.

1416 Dialer Number Matching DisplayFrom the Idle Screen, the Dialer Number Match Pop-Up will display a Caller Informa-tion Widget for the Contact matched.

2171 Contact List Matching RulesWhen any entered number matches any substring of numbers in a saved Phone Number, Contact List Matching will occur.

1319 Phonebook Match List DisplayIf Phonebook Match is enabled and Abbre-viated Dialing is disabled, entry of a 4 to 6 digit string will immediately display a list of phonebook matches.

1320 Phonebook Match List Displays for Any Matches

If Phonebook Match is enabled, a list of phonebook matches will be displayed for an entered number, even if only one match exists.

1321 Phonebook Match List Has PriorityIn a case where there is insu�cient room for both the Phonebook Match list, and the State Name match, the State Name match may be overwritten or discarded when the Phonebook Match list is displayed.

Figure 1415: Dialer Number Match Display

Note 1416: See Requirement 2528, et. al. for general details on the Caller Information Widget.

Example 2171: [7]-[5]-[1] is dialed, the following matches from the phone book could be valid:751-556-7690 816-751-9089 785-232-7512 913-487-5121

2565: Contacts Widget2565: Contacts Widget


!"#$%&'()

$ *+,-...-+/01

!"#$%&'()

$ *+,-...-+/01

Figure 1319: Dialer Matching - Key Assignments & Actions

b [LEFT-SOFTKEY]“Send message,” see 3721

d [RIGHT-SOFTKEY]“Options,” see 3722

e 12-Key padContinues dialing

c [TALK]Dials number or match

a [PTT]Places DC Call to number or match

f Key performs default action(s). See Requirement 3644.g Key disabled in this screen or state.



10

Preface xxi

Figure P-5. A selection of the devices surveyed to discover, confirm, and understand the patterns that ended up in this book. This is just a small sampling. Add another 30 or more handsets, 10 tablets, 10 eReaders, numerous game controllers and portable game units, a handful of GPS navigation devices, and many others to the list. These devices are not just for show; many work, and are readily available to refer to during design (and when we were writing this book). Many have Velcro on the back, and are stuck to the wall of the design studio, to be in our faces every day when we come to work.

Many are those we gathered over time, but we also acquired new ones, and asked people we know, work with, met at parties, or ran into at conferences to let us see their devices. We hit up stores when new devices came out. We noticed, and took photos of, the way PIN pads and kiosks work. We skulked around electronics recyclers to get old devices on the cheap and begged friends to let us have their dusty old phones. Figure P-5 shows a sample of these devices.

And then we compared the implementations. In many cases, the all-new, super-cool best practice was just a very minor change (or no change at all) to something on a 10-year-old PDA, or on many feature phones. In all too many cases, the newest technologies had lost common and best practices from the well-established methods of scroll-and-select devices.

We engaged with the users, too, in any environment. Whether at an airport, in a coffee shop, on a busy street, in the office, or in our family room, we recorded behavior. We ob-served these individual, social, and cultural interactions in varying contexts, paying close attention to how people use these devices in their everyday lives. We also interviewed them to gain rich, insightful, qualitative data about their needs, motivations, and attitudes about using mobile devices. All of this ethnography and contextual inquiry—whether formal research or ad hoc discovery—further validate the design recommendations pre-sented throughout this book.

As a result of this research, we hope we have provided balanced and interlocking coverage of emerging technologies, the common practice of the most buzz-worthy current devices, and the best practice of the well-established “low-end” devices.

Two frames from the operator specification, showing the organizing structures used to make the documents easy to reference and follow.

A selection of pages from the O’Reilly book Designing Mobile Interfaces. I wrote essentailly all the patterns, much other content, and drew all the illustrations.

As much as I design products, I also design documents to assure they are well understood, by the document consumers, and comply with internal processes. To me, there’s no point in design if it isn’t built.

I have developed branding and style guides, and led teams on creating operator standards for UI overlays on their whole family of handsets.

Lead Interation Designer, with a team of junior designers and interns to analyze and organize the 10,000 some-odd requirements. Worked closely with product owners, and conducted research with several handset development teams.

I have shared my knowledge not just via blogging and speaking, but by publishing my design guidelines, and writing books on design process, and mobile design patterns.

Patterns for General Interactive Controls 359

All state-changing gestures should be reversible, usually with a directly opposite gesture. Removing the phone from the ear must also be sensed so that it reliably and quickly un-locks and does not cause a delay in its use.

Some indication of the gesture must be presented visually. Very often, this is not explicit (such as an icon or overlay) but switches modes at a higher level. When a device is locked due to being placed facedown or near the ear, the screen is also blanked. Aside from sav-ing power when there is no way to read the screen anyway, this serves to signal that input is impossible in the event that it does not unlock immediately.

Nongestural methods must be available to remove or reverse state-changing gestures. For example, if sensors do not unlock the device in the earlier examples, the conventional unlock method (e.g., power/lock button) must be enabled. Generally, this means that Kinesthetic Gestures should simply be shortcuts to existing features.

For process initiation, usually used with transactional features such as NFC payment, the gesture toward the reader should be considered to be the same as the user selecting an on-screen function to open a shortcut; this is simply the first step of the process. Additional explicit actions must be taken to confirm the remainder of the transaction.

Kinesthetic Gestures are not as well known as On-screen Gestures, so they may be unex-pected to some users. Settings should be provided to disable (or enable) certain behaviors.

Presentation details

Figure 10-28. Two types of proximity to other devices exist. In the first, the devices are broadly equal and activity may be one-way (sending a file) or two-way (exchanging contact information). In the second, the user’s mobile device is one side of a transaction, and the other is a terminal such as a payment or identity system.

When reacting to another device, such as an NFC reader, make sure the positional rela-tionship between the devices is implied (or explicitly communicated) by the position of elements on the screen.

Patterns for General Interactive Controls 351

Two-point actionsGenerally, using two fingers, these use movement to perform gestures on larger areas, where enough room is provided for both points to be on the area to be affected. See Figure 10-23.

Both moveTwo-point gestures are similar to Press-and-Hold, in that they are usually used to perform a secondary action, different from a one-point drag. These are often used to deconflict from single-point gestures, as shown in Figure 10-24. For example, a single-finger gesture may select text, and a two-finger gesture scrolls the page.

Axis and moveOne point fixes the item to be rotated, providing an axis, while the other moves about this axis. To be perceived as this action, the axis finger must move as little as a typical tap action.

Multipoint inputThis may use three or four (rarely more) fingers to perform simple gestures which generally impact the entire device or the entire currently running application. This is often used to deconflict single-point drag actions. For example, a single-finger drag may scroll the screen, but a four-finger drag will open a running applications list.

Interaction details

Figure 10-23. A selection of two-point gesture types

Whenever possible, you must attempt to use gestures to simulate physical changes in the device. Pretend the screen is a physical object such as a piece of paper, with access only through the viewport. If it helps—and we think it does—you can even very roughly proto-type the interactions by moving paper on a desk. Drag to move the paper, rotate by fixing it with one finger and moving the other, and so on.

Some actions require a bit more imagination. The “pinch” gesture assumes the paper is elastic and contains an arbitrary amount of information; spreading stretches the paper, showing more detail, and pinching squishes the paper, showing less.

Patterns for Screens, Lights, and Sensors 433

The user must be able to make manual adjustments even if an automatic setting is provid-ed, and should be able to provide user input to the automatic settings, as well as provide user calibrations to the light sensor.

As a general rule, keyboard and keypad backlight should follow the same illumination guidelines as the display, though manual control may provide for separate settings. Key backlight color changes or blinking as a signaling method is discussed under the LED pattern.

Variations

Manual is the most common mode, available on almost all devices with a screen. A simple one-axis user control is provided on a settings panel as in Figure 13-7.

Modern mobile devices with high-quality screens mostly come set to automatic mode by default. While in automatic, a light sensor detects the user’s face and surmises the ambi-ent light level to determine optimal output. The user may switch to manual mode, which disables the automatic settings.

An automatic mode with manual input should also be provided, to allow user modifica-tions to any failure of the automatic system to detect the optimal output level.

A learning mode would be a useful fourth variation, using the principles of learning user predictive text, voice, or gestural input. The device will monitor user overrides to auto-matic input and/or accept multiple user calibrations in order to adjust how automatic behaviors work, with the intent of an entirely satisfactory automatic behavior, eventually.

Interaction details

Figure 13-8. Easy access to brightness should be provided when it can be. The example Pop-Up appears when the volume control is used. Using the left and right directional controls changes focus to the brightness. Automatic brightness will be disabled when manual changes are made. Changes should always be immediately implemented, without explicit saving.

Whenever possible, make access to the brightness settings immediately accessible from any screen. A well-used option is to have an existing function (such as volume or power) make a general settings panel appear, with brightness, volume, synch, and power-off/restart functions (see Figure 13-8). Once it appears, volume keys may change the vol-ume, and (for example) the Left and Right Directional Entry keys may change brightness. Other solutions may be more suitable to your specific interface or operating system.



11

This portfolio is just a sample of the interactive work I have

performed. Some work shown has been sanitized, and

some has been left out to preserve anonymity of clients.

Please ask for any additional details you may need.

5600 Russell AvenueMission, Kansas 66202United States

+1 816 210 0455

www.donttouchme.com

[email protected]

@shoobe01

shoobe01 on

December 2010 to October 2011:Information ArchitectAlexander Interactive

August 2007 to September 2010:Creative Director / Interaction DirectorLittle Springs Design

November 2004 to August 2007:Human Factors EngineerSprint-Nextel User Experience Design

March 2003 to November 2004:Interaction Design Manager Sprint Enterprise Web Solutions, User Experience

May 2001 to March 2003:Information Design ManagerSprintPCS.com, User Experience

June 1999 to May 2001:Web Designer Sprint PCS, Product Design, E-Business Operations & Design

October 1997 to June 1999:Web DeveloperIsoSystems, Kansas City, MO

Date post:	04-Jul-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times

Steven Hoober - 4ourth Mobile4ourth.com/downloads/StevenHoober-Portfolio.pdfSuper Freakonomics:...

Documents