Design Context Publication PDF

Page 1

Rob Green

Interaction Design Handbook


People & Technology

1

This first section is an exploration of how people and technology relate to one another. I will look at how technology has shaped our progression into the 21st century and predictions for the future.


Wilson Miner Build Lecture Brilliant talk by Wilson Miner about how digital tools are helping to shape our future and behavior and that as interaction designers, and we are are ones choosing what goes on to the screens of this technology. Really interesting view on interaction design and an all-round excellent talk.

Source: https://vimeo.com/34017777

2


IBM Watson Mini documentary about some of the design decisions made behind the 'avatar' for IBM's supercomputer Watson that recently trounced two Jeopardy! game show veterans on the same gameshow. Although the computer can answer questions and use information in a similar was to humans the avatar chosen was distinctly abstract (although could show emotion) perhaps because of the uncanny valley anomaly.

Source: http://www.fastcoexist.com/1679887/ibms-watson-could-help-mining-companies-stop-being-so-destructive

3


Why Does Interaction Design Matter?

If interaction design plays such a critical role in our lives then it’s time that we got our act together. We can’t just point to the latest Apple product and nod our heads. Every company

There have been some remarkable improvements in the way we can interact with the subways over the last decade, and gain feedback to better understand how the system works. This process started with the muchheralded Metrocard vending machines designed by Antenna in 1999 and has been extended to the design of the subway cars with new dynamic displays and the recent addition of signs indicating expected arrival times for trains. The success of these enhancements is cumulative as they work together to make the overall system easier to interact with. I can now see the arrival sign at my station on Houston Street before I swipe, letting me know if the 1/9 is coming soon (or I can switch to the C/E two blocks away on Spring Street). In each case these enhancements overlay effectively onto the existing infrastructure. These improvements are not disruptive the way the "swipe" still is.

that I work with, from GE on down, is trying desperately to hire qualified interaction designers, yet most of their employees haven’t a clue what interaction designers do. We need to close that gap and start agreeing on what makes interaction design "good" or "meaningful"--and communicate that back to people in ways they will care. This year IxDA launched the Interaction Design Awards to do just that--to create a platform that focuses purely on this new practice in all its forms. As head of the jury I will be gathering some incredible minds in NY in mid-November to address these questions head-on. Our goal is not to just select some great examples, but to conduct a broader conversation about the role and purpose of this new practice, with Co.Design covering throughout. Quoted from the article: read more over at the source

Source: http://www.fastcodesign.com/1665022/why-does-interaction-design-matter-lets-look-at-the-evolving-subway-experience

4


Offline: Peeking

the internet from my life. For some reason, in

our site is doing traffic-wise, and I often crane

my naivety, I assumed that my own conscious

my neck when I catch wind of a private meme.

decisions and choices — these things I have I can honestly say that since May 1st I haven't

been steadfast in — would regulate my

These little indiscretions might sound

loaded a single webpage, synced a single

internet intake. I was so, so wrong.

harmless, but in aggregate they serve to make my curiosity itch. I start to wonder what exactly

client, downloaded a single file, or sent a single email. I also haven't explicitly asked

The Verge has an open office, with desks

that headline says. What's popping on The

anyone to do those things for me, though I'm

lining the walls and a hub of tables in the

Verge right now? What's popular on Reddit?

aware that some webpages have been loaded,

middle of the room. And I can't help but look.

What insane, hilarious Verge-memes have I

files downloaded, and emails sent on my

As it turns out, my eyes are drawn to screens,

missed? Is talking to @futurepaul still a

behalf. When it comes to purposeful internet

just like the vibrant colors and skin-rich photos

popular pastime? I've specifically asked to not

use, I'm almost as pure as the wind-driven

of the magazine rack can steal your gaze. I'm

be informed what people say about me in

snow.

constantly catching tidbits on my co-workers'

comments or tweets, but boy do I wonder.

LCDs: a jumbo-sized headline here, a I've actually had recurring dreams about vastly

Photoshop there, traffic numbers, chat

In contrast to the office, my mind is at peace

violating my self-imposed internet exile,

windows, Twitter clients, and the ever-present

when I'm home. The buzz of curiosity fades,

dreams where I'm seated among half a dozen

browser.

and I can return to a focus on the specific moment. For my experiment to be a success, I

computers, all refreshing Facebook and Tumblr repeatedly, while my supporters in this

Depending on the size of the text, I can usually

have to stop caring what the internet cares

experiment look on in horror. Maybe it's this

avert my eyes before I gain specific

about, and instead turn my gaze to the

subconscious fear that keeps the thought of

information. You'll often see me in meetings

meatspace and its concerns... but I'm also

cheating far from my mind. Also, I don't think

with my head down, or staring off into space,

hoping to avoid hermitage.

my apartment's Wi-Fi works anymore,

to avoid a nearby information glut. Still, there

according to my disgruntled roommate.

are some things that I have a hard time

Quoted from the article: read more over at

But despite my medal-worthy self control, I

skipping. Live streams and YouTube videos

the source

can't say I've entirely succeeded in extricating

are a real minefield, I'm typically aware of how

Source: http://www.theverge.com/2012/5/18/3024291/offline-peeking-paul-miller

5


Retro iPhone Interface This retro user interface for the iPhone has been very popular amongst design blogs recently. As technologies become older they sometimes move into cult status and become contemporarily popular again as ‘retro’. I find this emotional attachment to outdated technology very interesting as it can become a very profitable niche. Look at the success of the Instagram app, a simple mobile app that lets users share photographs online with ‘retro’ style filters over them. It was recently bought by Facebook for one billion dollars!

Source: http://www.fastcodesign.com/1669156/even-better-than-iphone-5-an-iphone-with-the-1986-mac-os

6


Why Angry Birds is so Successful The clip to the right shows the promotional video for the new Angry Birds game. It was shown on kid’s TV as a show rather than an advert, which is expertly crafty and successful way to get a young audience hooked on a product. There is an article over at Mauro New Media that goes into just how Angry Birds uses simple cognitive devices to make the player addicted to the game. This addictive side to technology really interests me, other tech such as mobile phones and social networks also show signs of addictiveness.

Source: http://www.mauronewmedia.com/blog/?p=415

7


Forty Years of the Internet

to the Stanford machine, and there was no

and email was beginning to change the world;

opportunity for portentousness: his instructions

the first really usable web browser wasn't

were to type the command LOGIN.

launched until 1993, but by 1995 we had Amazon, by 1998 Google, and by 2001,

It's impossible to say for certain when the internet began, mainly because nobody can agree on what, precisely, the internet is. (This is only partly a philosophical question: it is also a matter of egos, since several of the people who made key contributions are anxious to claim the credit.) But 29 October 1969 – 40 years ago next week – has a strong claim for being, as Kleinrock puts it today, "the day the infant internet uttered its first words". At 10.30pm, as Kleinrock's fellow professors and students crowded around, a computer was connected to the IMP, which made contact with a second IMP, attached to a second computer, several hundred miles away at the Stanford Research Institute, and an undergraduate named Charley Kline tapped out a message. Samuel Morse, sending the first telegraph message 125 years previously, chose the portentous phrase: "What hath God wrought?" But Kline's task was to log in remotely from LA

To say that the rest is history is the emptiest of

Wikipedia, at which point there were 513

cliches – but trying to express the magnitude

million people online. Today the figure is more

of what began that day, and what has

like 1.7 billion.

happened in the decades since, is an undertaking that quickly exposes the limits of

Quoted from the article: read more over at

language. It's interesting to compare how

the source

much has changed in computing and the internet since 1969 with, say, how much has changed in world politics. Consider even the briefest summary of how much has happened on the global stage since 1969: the Vietnam war ended; the cold war escalated then declined; the Berlin Wall fell; communism collapsed; Islamic fundamentalism surged. And yet nothing has quite the power to make people in their 30s, 40s or 50s feel very old indeed as reflecting upon the growth of the internet and the world wide web. Twelve years after Charley Kline's first message on the Arpanet, as it was then known, there were still only 213 computers on the network; but 14 years after that, 16 million people were online,

Source: http://www.guardian.co.uk/technology/2009/oct/23/internet-40-history-arpanet

8


Mobile Phones Changed Society

People tend to have a love-hate relationship with their phones, loving the sense of freedom they give, or the technology itself, or the status they believe an expensive phone confers. But

From the commuters refrain of "I'm on the train" to teenagers engaging in "sexting", a quarter century of mobiles has changed not just the way people communicate but the way people act. Twenty-five years ago a telephone was just a telephone, a way to contact someone if they happened to be at home when called.

at the same time they hate the sense of being tied to work by the phone, never able to be out of contact. Some people hate the way others use their phones: from the loud businessman shouting on the train to the teenager playing their tinny music at the back of the bus. Quoted from the article: read more over at the source

But by the start of the past decade, with mobile ownership soaring – from 15m subscriptions in 1998 to 43m in 2000 – they were so ubiquitous that comedian Dom Joly was able to capture the zeitgeist in his Trigger Happy TV sketch show by loudly answering his oversized mobile in inappropriate places: "Hello, I'm in the library." It did not take long for "quiet" carriages to appear on trains where mobile phone were banned.

Source: http://www.guardian.co.uk/business/2010/jan/01/mobile-phones-changed-society

9


Impact of iPad

environmentalism and capitalism can co-exist. Ultimately, the buzz over this tablet device

To end this brief inquiry, here is a favorite

says we're a long, long way off from

quote from John R Ehrenfeld in his book

minimizing our consumption of goods -

Sustainability By Design: A Subversive

especially electronics - and that our

Strategy for Transforming Our Consumer

technology is growing and changing faster

Culture:

than we can consume, appreciate, and more importantly reuse or recycle all of the things

"The connection of technology (construed

we create with our advancements.

broadly as the resources we employ to bring about change in the world) to culture is

Can such rapidly advancing technology and

important in that it can be one of several levers

consumerism ever be part of a sustainable

for change. Although technology thus plays a

future if companies like Apple, who have

starring role in producing unsustainability, it

seemingly limitless clout in the consumer

can be just as important as a means to create

electronics market, are designing gadgets that

sustainability. This apparent paradox can be

make everyone go gaga, but that do little to

resolved by considering how culture affects the

change the direction of not simply greener, but

way in which we design and use technological

sustainable design?

artifacts an institutions." Quoted from the article: read more over at What does the excitement over Apple's tablet

the source

say about our culture, especially coming right on the heels of the embarrassing failure of COP15 talks? It seems to put a spotlight on the question of whether or not Source: http://www.treehugger.com/clean-technology/what-does-apples-ipad-tablet-really-mean-for-our-society.html

10


The iPhone Effect

- HP announces acquisition of Palm on April

- AT&T’s postpaid integrated 3G devices have

28, 2010.

grown steadily since the launch of the iPhone. It went from 8.5 million in fourth quarter 2008

Apple’s iPhone debuted four years ago, and

- Nokia announces partnership with Microsoft

we sometimes take for granted how much has

to run Windows Phone 7 on upcoming

changed since then. The phone altered the

smartphones on Feb. 11, 2011.

to 29.7 million by second quarter 2010. - Data revenue in 2006 for all carriers was just 7.5 percent of total revenue. By 2009, it was

smartphone landscape and ushered in the modern era of intelligent, connected devices.

- Motorola spins off Motorola Mobility Holdings

up to 26.8 percent.

Apple hasn’t cruised easily to the top; in fact, it

on Jan. 4, 2011.

The rise of smartphones

Effect on carrier competition and data use

- Smartphone adoption in first quarter 2008

continues to trail nemesis Google’s Android in smartphone market share. But it shook up the

was 10 percent according to Nielsen. Nielsen

industry and forced changes and upheaval among many competitors.

- In 2006, Verizon Wireless had 7.7 million

predicts smartphones will outnumber feature

new subscriber additions compared to

phones by the end of this year.

Here’s a look at some stats on how things

AT&T’s 7.1 million. After the iPhone

have changed over that period, both for Apple

launched, AT&T outpaced Verizon in net

- Worldwide smartphone sales will hit 468

and for other companies operating in the same

subscribers adds for the next three years,

million this year and reach 1.1 billion by

space.

according to FCC figures. By 2009, AT&T

2015, according to Gartner.

had 8.1 million new adds while Verizon had Notable changes since the introduction of

5.9 million.

Quoted from the article: read more over at the source

the iPhone - AT&T’s earnings before interest, taxes, debt - Google introduces the Android operating

and amortization went from 34.4 percent in

system on Oct. 21, 2008.

fourth quarter 2006 to 40.7 percent by fourth quarter 2009, outperforming all the other major carriers.

Source: http://gigaom.com/2011/06/29/the-iphone-effect-how-apples-phone-changed-everything/

11


Minority Report Futuristic UI The interfaces shown on the film Minority Report are a good example of how fluidly we may one day be able to control our technology. These style of gestural interfaces are under actual development by John Underkoffler, who was used as a scientific adviser by the filmmakers to create the effects. He has an excellent lecture about his current inventions on the TED website.

Source: http://www.youtube.com/watch?v=NwVBzx0LMNQ

12


Black Mirror This mini-series by Charlie Brooker looked at the darker side of our technological obsessions.The trailer shown here is from the last of three episodes and it explores the idea a perfect memory system developed using brain implants. The story explores how it could drive people to madness, being able to look over and scrutinise every last detail they have witnessed throughout their lives.

Source: http://www.youtube.com/watch?v=3bFCqK81s7Y

13


Project Glass Project glass is a Google project that is looking at creating augmented reality glasses that would overlay useful information such as directions, names and messages as we look at the world around us. I think this video does a very good job at showing how useful this kind of technology could be, although it may get annoying to have everyone talking to themselves in public places! We all hate those bluetooth headsets... Overall I like the idea that technology is becoming much more natural to use, moving away from a keyboard and mouse to something much more intuitive.

Source: http://www.youtube.com/watch?v=9c6W4CCU9M4

14


The Matrix Another excellent example of the darker side of technology is the Matrix, set in a postapocalyptic world where intelligent robots have enslaved humanity as a power source and trapped our minds in a virtual reality. Although it has a dark story, this clip shows just how amazing it would be to have such a direct technological access to our minds.

Source: http://www.youtube.com/watch?v=WnEYHQ9dscY

15


Avatar Similar to the Matrix, Avatar explores the idea of being able to wirelessly transmit our minds into a different physical form. The main character can ‘log in’ to an alien body and experience it as if it was his own. I like how this is a kind of extension to the already popular idea of having an ‘Avatar’ in modern games and on websites. These character are a representation of yourself, imagined how you yourself want to appear.

Source: http://www.youtube.com/watch?v=2LQkTQ1foSU

16


Envisioning Future Technology This brilliant interactive graphic shows popular predictions for when certain scientific advancements will arrive. I love the colour coded design and how it links off to wikipedia entries for each piece of technology. Although not always accurate predictions like this have been true in the past or even proven to be closer than we thought. It would be interesting to see these be checked on/off as the years go by to see how true they were.

Source: http://envisioningtech.com/

17


Types of Interface

2

In this section I will investigate the different types of user interface, from simple mobiles apps to emerging technologies.


Sputnik8 Windows UI Concept This is doing the rounds on design blogs at the moment and quite rightly so! I think it's a vast improvement on the current Window's UI but keeps to a traditional 'window-based' desktop experience. The latest official designs coming from Microsoft for Windows 8 has radically changed to a 'titled' experience design to fit in with their mobile UI, something that I don't quite agree with since they are very different interactive experiences.

Source: http://www.theverge.com/2012/2/24/2822891/windows-desktop-ui-concept

19


Cardmunch App This app uses the image of a business card through a mobile’s camera to gather information about that person from the business social media site ‘Linked In’. I love how this app links the physical business card with digital information to deliver useful information for the user. It will be interesting to see how other apps start to link online information to things in the real world for us when we need it most.

Source: http://www.youtube.com/watch?v=BEsRH2vW74I

20


Xero Accounting App Xero touch helps people manage their business accounts on the go. It automates certain calculations and organises information for the user to help them save time and space in their pockets. Apps that are designed to work so closely to a specific activity are often the most successful because they become an integral time saver for their users.

Source: http://www.fastcodesign.com/1669123/xero-reinvents-accounting-for-small-businesses-with-superb-ui-design

21


Oscar winning iPad Book Last night an unexpected masterpiece won the Oscar for best short film. The real milestone: After beginning as a film, it gained its truest expression as an iPad app. Also remarkable: The Fantastic Flying Books of Mr. Morris Lessmore was the brainchild of Moonbot Studios, a startup out of Shreveport, Louisiana. Here was our first post about the app. E-books are already a fraught subject for many readers, writers, publishers, and designers, but children’s e-books are even more so. Is it rotting their minds? Is it as good as good ol’ paper? Is it too interactive for their own good? Obviously there are no practical answers to such questions, but at least one children’s e-book/app/thingie (what do we call these things, again?) is doing it very, very right. It’s called The Fantastic Flying Books of Mr. Morris Lessmore, and it’s like a well-written bedtime story and an immersive animated movie at once--without being "too much" of either.

Part of why the book works so well is its top-

in a tornado, you can use your fingers to swipe

shelf creative pedigree: Author William Joyce

and spin it around--but you don’t have to.

is also an accomplished illustrator and animator who’s publishedNew Yorker covers,

Quoted from the article: read more over at

won a bunch of Emmys, created character

the source

designs for some of Pixar’s first animated classics, and worked on many others for Dreamworks and Disney. With his cohorts at Moonbot Studios, he created an interactive book-app around the story and a standalone animated film--so you can experience The Fantastic Flying Books of Mr. Morris Lessmore however you like. Designing interactive interfaces for kids is no mean feat, and the Moonbot team really made some great choices with Morris Lessmore. When you open up the app, it doesn’t waste your time with teaching-screens about how to interact with it--it just smoothly enters the story. (A key feature, I imagine, when you want to get Junior to go the youknowwhat to sleep ASAP.) Gently animated cues surface in the lush visuals at just the right time, encouraging you to explore the app rather than slavishly plod through it: When a house gets picked up

Source: http://www.fastcodesign.com/1669127/and-the-oscar-for-best-short-film-goes-tooan-ipad-app

22


Mobile UI Trends These two website deliver the latest screenshots from newly released mobile apps. Their aim to catalogue all the different design trends and patterns that are being used by many different interactive designers. Although I feel that following too many trends stifles innovation, a little bit of familiarity goes a long way in making the user feel secure and in control. If our designs are too unique they won’t know how to use them at all and will have to go through a lengthy learning process to make the most of our work.

Source: http://mobile-patterns.com/ & http://pttrns.com/

23


Talk to Me Book The Talk to Me book is a catalogue of many different types of interactive design and products. One main feature of the book is the use of QR (Quick Response) codes that when scanned with a mobile phone take the reader to a video of that particular design in action. I think linking videos in this book was an excellent idea because of the subject matter. It helped explain a lot of the products shown and although I do like ebooks, linking relevant digital information like this to physical book is a great compromise and gets the best of both digital and print.

Source: http://www.amazon.co.uk/dp/0870707965

24


Solo Web App Solo is an example of totally web-based interactive service. It is aimed at freelance designers and offers a variety of features that will help them conduct their daily business. The reason this web service works so well is that it pulls lots of different tools and information relevant to a particular profession into one place. It also organises everything into a beautiful grid-based interface that their design conscious users will love.

Source: http://thrivesolo.com/

25


Bit Timer I love the simplicity of bit timer. It allows the user to set different lengths of times alarms and does so with a clear, colour coded interface. It is an example of how a very simple app can be an excellent straightforward tool for the user.

Source: http://www.fastcodesign.com/1669312/bit-timer-a-brilliant-app-that-makes-interval-workouts-easy

26


Rechner Calculator App The Rechner app for iPhone is a simple calculator where the operations are chosen using touch gestures. I think that although it won't make much difference to the speed of using the calculator it would be more enjoyable and 'tactile' for the user.

Source: http://rechner-app.com/

27


Zero N Interaction The Zero N project is a groundbreaking interactive product that lets a computer control a metal ball in mid-air using a special magnetic mechanism. The user can influence the direction/position of the ball as the computer also controls it’s direction. One program lets it behave like a light source, with shadows generated on a screen below other object below. Another set-up has the computer replicate a planetary orbit around other objects that the user can influence by moving the ball. This is a really unique interactive design and I can’t wait to what else they can apply it to as they develop it further.

Source: http://www.youtube.com/watch?v=-i2kJMJz7Wg

28


‘Leap’ Interface Technology This product takes the motion tracking idea behind the Xbox Kinect and takes it to the next level. It detects different points of your arms and hands with a very high accuracy and then allows you to control the computer with a variety of movements and gestures. This really reminds me of the interaction seen in the movie Minority Report that I talked about earlier. It’s an example of how integrated interactive design is becoming with our bodies and natural movements.

Source: http://youtu.be/_d6KuiuteIA

29


MaKey MaKey This new product is a very simple device that hooks up to a computer and they lets the user replace keys/functions with, well, anything. Once plugged into the usb port the user can attach crocodile clips to any object that is slightly conductible (even our own bodies) and replace a key on their computer. The possibilities delivered by something so simple are astounding, I want to order one myself and see what I can produce with it!

Source: http://www.kickstarter.com/projects/joylabs/makey-makey-an-invention-kit-for-everyone

30


Paper App by FiftyThree I’ve been using this new app myself for my work and it works really well. All the different tools for drawing are perfectly balanced in their variety, letting you use a host of different drawing styles. At first the limited customisation options make you feel a little constrains, as other drawing apps have many different options and controls. After using it for a little while you become glad of these constraints as they allow you to keep focused on drawing rather than setting things up. One problem I have with the app though is that the gestures used for moving between ‘pages’ are often activated accidentally whilst drawing. Other than that it is very easy to use and the main learning curve is trying out the different

Source: http://www.fiftythree.com/

31


Fluent.io This app is a replacement for the traditional email client. It implements much more modern interactive features, taking inspiration from twitter, social media sites and RSS clients. It tries to create a ‘conversation’ rather than separate messages between users. I really like the idea and design decisions behind this, especially the way images are shown in a clear gallery thumbnail rather than just a small list of filenames or huge images that are bigger than the window.

Source: http://fluent.io/

32


Touchscreen Keyboard Concept This is such a simple fix for tying on a touchscreen that it’s actually frustrating that it doesn’t work on an iPad already. After watching the video and then using my own iPad, I actually tried to swipe over to move the cursor position by accident. It goes to show that even the smallest little ideas can greatly improve usability.

Source: http://www.fastcodesign.com/1669764/this-dead-simple-idea-could-fix-ipad-s-lousy-typing

33


Pebble Watch This interactive E-Paper watch was pup on the crowd-funding website Kickstarter to raise money for production and broke all their funding records. The watch links up to an android or iOS mobile phone and delivers texts, calls, emails and other information from the phone to it’s screen. It can also run simple apps developed by the creators and support community such as sport timers, games and controllers for your mobile apps (such as the music player). I think this is a great example of something building on top of a pre-existing product and giving is a new level of usability.

Source: http://www.kickstarter.com/projects/597507018/pebble-e-paper-watch-for-iphone-and-android

34


Spatially Aware Transfer This video shows a concept for a new way to send information between your electronic devices. I feel the reason this has become popular is because it links the digital elements on screen with a very natural and physical way to perform the action of transferring data.

Source: http://www.doobybrain.com/2012/05/04/spatially-aware-device-transfer/

35


Pipe App The thing I like the most about this app is that the imagery is very symbolic of how we see the internet working. The idea of information going into a pipe at one end and out the other is very visceral, it just feels right.

Source: http://youtu.be/zQsLMItmHRI

36


Retro USB Controller An example of old technology becoming popular and being re-introduced is this USB retro Nintendo NES controller. Although designed such a long time ago, people seem to love the style of this controller enough for it to be wired up for use with modern computers. One reason for it being re-sold will be for use with the same games it was originally designed for, as these older games have been re- released through ‘emulators’ on modern computer systems.

Source: http://www.thinkgeek.com/electronics/retro-gaming/ba5a/

37


Real-Life Instagram Camera This design for a retro-style camera is another example of a product building on an existing service to improve the user’s experience. In this case it works with the Instagram software for mobile phones, Instagram lets the user take photos and then lets them choose from a variety of filters that make them look like they have been taken with a retro camera. This product extends that functionality and actually lets the user instantly print off the photographs they take. I have a feeling this will become very popular with style conscious people who already use the App regularly.

Source: http://www.adr-studio.it/site/?p=399

38


Disney Touché This Disney research project is another interactive design that uses the human hand as a controller. It uses the same electrical sensor method that touch-screens do but detects much more information. This allows the computer to know exactly how the user is holding an object. The best thing about this video is the different uses they have already come up with for the technology, it really gets your imagination going about how you could use it yourself.

Source: http://www.youtube.com/watch?v=E4tYpXVTjxA

39


UI Design

3

This final section will look at the different approaches, methods, tools and resources that interactive designers can utilise when creating interfaces.


Offscreen Magazine Offscreen Magazine is a new publication looking at the creative aspects of many different web entrepreneurs. I just ordered my copy and it should hopefully be waiting for me when I go home next weekend!

Source: http://www.offscreenmag.com/issue1/

41


Making of: Repeat Timer Pro App I found some excellent information about designing, developing and marketing a successful mobile app over in this article. I think this information could be very handy for when I'm trying to create a fully working app in the near future.

Source: http://www.repeattimerapp.com/how/

42


Connect a Sketch The Connect-A-Sketch prototyping web app lets users upload sketches of their app/web designs and add hotspots, allowing the

Preview

creation of a navigable mockup of a product. The sketched prototype can then by sent to

Prototype

potential users for testing where they can easily give feedback. Hotspot Tool

This is an interactive image, click the bubbles to read more.

Source: http://connectasketch.com/

43


Website Inspiration These are a couple of website with a brilliant collection of screens of and links to interesting website designs. They have useful categorisation systems that lets the user look for exactly what they need when needing some inspiration for the website they are designing. I usually use these resources when looking for an interesting way to design the navigation system of a site.

Source: http://siteinspire.com/ & http://www.siiimple.com/

44


Making of Sharypic A brilliant step-by-step review of how a website was produced and developed from it’s concept right through to it’s latest version.

Source: http://sachagreif.com/making-of-sharypic-for-iphone/

45


First Principles of Interaction Design The following principles are fundamental to the design and implementation of effective interfaces: • Anticipation • Autonomy • Color Blindness • Consistency • Defaults • Efficiency of the User • Explorable Interfaces • Fitts' Law • Human-Interface Objects • Latency Reduction • Learnability • Limit Tradeoffs • Metaphors • Protect the User's Work • Readability • Track State • Visible Interfaces

Source: http://gigaom.com/2011/06/29/the-iphone-effect-how-apples-phone-changed-everything/

46


IDEO Method Cards The IDEO Method Cards have a variety of different research and testing techniques on them to help when developing a product or design. I really want to purchase a set of these because often the hardest part of designing is deciding how something should be researched or tested.

Source: http://www.ideo.com/work/method-cards/

47


Fail Fast, Fail Often, Fail

hand in hand.

entire solution. Including quick prototyping in the design process will not only help

Fearing failure stifles creativity and progress. If

communicate your ideas but allow you to

On the morning of December 17, 1903, Orville

you're not failing, you're not going to innovate.

harness one of the virtues of creating

and Wilbur Wright eyed another chance at

Do your product or service a favor: embrace

something truly innovative: failure.

getting their flying machine off the ground. The

failure and blueprint a plan that affords you the

brothers and five other men lugged their 600-

opportunity to do it early and often. Prototyping

Quoted from the article: read more over at

pound machine over a quarter mile uphill and

can help you do just that.

the source

placed it on a 60-foot monorail. They had done the same thing three days earlier but crashed,

Rapid prototyping is the process of quickly

breaking several parts in their flying prototype.

building the main feature paths of an interface.

This day was different. Undeterred by their

One of the largest benefits of prototypes is that

failure a mere 72 hours ago, the flying

they provide an easy way to get your idea in

machine made its way down the monorail and

front of potential end-users and key client

picked up speed. Wilbur ran along the side of

stakeholders. Getting the idea out of the

the plane, steadying the wing. As the machine

designer's head and into a demonstrable

left the ground, a camera shutter opened,

format is an effective process for eliminating

capturing one the most inspiring moments in

initial shortcomings and misplaced design

human history. Twelve seconds and 120 feet

assumptions.

later, what was previously impossible was now a reality.

And let's face it: In the world of interface design, image exports and slide decks are not

That day, the Wright brothers finally arrived at

the most effective way to convey an idea.

an ultimate success, but the path was filled

Even for a system with just a modest amount

with disappointing detours and a daunting

of complexity, static visual renderings

string of failures. Innovation and failure go

represent a decidedly small sampling of the

Source: http://www.fastcodesign.com/1663968/wanna-create-a-great-product-fail-early-fail-fast-fail-often

48


Emotional Interface Design The interfaces we design must first be functional – they need to solve a problem for us. Next, they need to be reliable – no fail whales please. Our interfaces need to be usable – easy to learn, easy to use, and easy to remember. The piece we often overlook is the pleasure. It’s at the core of culinary arts, but we find it far too infrequently in the web apps and websites we use daily. Personality is the conspicuous difference between Basecamp and Wufoo. Personality is the platform for emotion. It’s the framework we use to crack jokes, empathize, and connect with other humans. If we can bake emotion into the interfaces we design, we reap big benefits. Babies create bonds with their parents through an interesting feedback loop. When they cry their parents respond by soothing them, which

releases calming neurotransmitters in their

Showing personality in your app, website, or

brains. As this cycle repeats, the baby begins

brand can be a very powerful way for your

to trust that their parents will respond when

audience to identify and empathize with you.

they need them.

People want to connect with real people and too often we forget that businesses are just

A similar feedback loop happens in interface

collections of people. So why not let that shine

design. Positive emotional stimuli can build a

through?

sense of trust and engagement with your users. People will forgive your site or

Quoted from the article: read more over at

application’s shortcomings, follow your lead,

the source

and sing your praises if you reward them with positive emotion. Aral Balkan’s Twitter iPhone app – Feathers – deftly combines usability and emotional design to create a pleasurable user experience. As you type a tweet, a cute birdy mascot starts to fill with color to indicate how many characters you have left of the 140 maximum. If you exceed 140 characters, the bird changes red to indicate your error. While satisfying a basic usability heuristic to provide feedback about system status, Balkan has also created an interaction with which his audience can fall in love.

Source: http://thinkvitamin.com/design/emotional-interface-design-the-gateway-to-passionate-users/

49


Interview: Tom Leca Excellent interview with the co-founder of the very popular email client Sparrow. Read the interview at the source

“In the past two years, Mac users got a great desktop email client alternative in the form of Sparrow, an elegant app with a unified inbox, full range of keyboard commands, Gmail labels, multiple account support, and Growl compatibility. The Sparrow team is at work on a dedicated iOS app, set for release this winter. Based in France, cofounder Dom Leca spared a few moments of his time to answer some of our pressing questions on apps, technology, design, and much more. He currently blogs at dominiqueleca.com, and can also be reached on Twitter @domleca.”

Source: http://www.theverge.com/2012/1/9/2685044/sparrow-dom-leca-5-minutes-on-the-verge

50


The Art of Apps At the Art Of Apps gallery event in New York City last week, seven apps were projected on TV screens to display the best user interfaces iOS has to offer. In front of each screen were the creators and designers behind apps like Paper, Mixel, Tweetbot, Piictu, Path, and the upcoming Cameo. The event was curated by Khoi Vinh, one-time designer fornytimes.com, founder of iPad collage app Mixel, and influential design blogger atsubtraction.com. Even the event website, built using Splash, a new tool for creating social-network-integrated show pages, is gorgeous and very focused on "good design." Quoted from the article: read more over at the source

Source: http://www.theverge.com/2012/5/21/3033867/the-art-of-apps-paper-mixel-khoi-vinh-interview & http://artofapps.splashthat.com/

51


How Design Works This brilliant single-article website explains to non-designers about the reason design should be important to them. It’s an excellent read even for designers and has lots or good facts and resources to pull inspiration from. It also uses the latest web technology to include fun little interactive elements to make the article more engaging.

Source: http://startupsthisishowdesignworks.com/

52


shift away from thinking about people as mere

be aligned, differentiated, or targeted to

“users” of a product or service (which turns out

support the larger meaning of a brand. What

to not be a new idea at all3). “User” is a

we missed by focusing on matters such as

There is something interesting about how

convenient label, but continuing to think of

flow and consistency is how to imbue a sense

people have always perceived, reacted to, and

people in this way—particularly as people

of connection, ownership, and emotional

built up relationships with brands. How do

continue to bring technology into their lives in

involvement that make the most successful

actions, reactions, and behaviors reinforce the

increasingly intimate ways4—doesn’t help

products and services truly compelling.

meaning of a brand? And how do we, as

interaction designers to think about the more

Perhaps because of where our practice

designers of all types but interaction designers

subtle and nuanced way that we need to in the

originally comes from1, we can still sometimes

in particular, better understand the role our

future.

slip back into describing what we are

Turn Pixels into a Brand

designing in terms of logic or a process and

work plays in contributing to how these It might seem like a largely semantic

seem content that this is enough to solve the

difference, but the trick here is to avoid

problem we are trying to address. The

By now, my own discipline of interaction

entering into a reductive way of thinking where

products and services we design will never

design is all too aware that thinking beyond

we ignore the nuances of human behavior,

exist in a vacuum, and every person will

single points of interaction with products or

even if we observe them first-hand. If we’re not

approach them with a unique set of needs,

services is essential for creating coherency

careful, we can sometimes force ourselves to

predispositions, problems, emotional states,

and, through that coherency, a logical, joined-

follow a process that, while it gives us comfort,

and everything else that makes human beings

up experience that feels as if it comes from the

can also remove the moments where we get to

frustratingly complex;the things that no design

same place with a consistent intent. We have

explore these nuances, and try to create

documentation can adequately capture (no

learned to think in terms of systems and

something with which people can form an

matter how hard we might try).

networks, and I believe the design is better for

even deeper bond.

relationships are nurtured and maintained?

Quoted from the article: read more over at

it. This has been mirrored by a shift from a focus As we consider the relationship between

on performance and usability to a focus on a

interaction and brand, another useful idea is to

wider experience; it is this experience that can

Source: http://10x10.method.com/brand-as-context-in-interaction-design/

the source

53


Gestural Icon Set This is a free icon set created to be used as a universal system for interaction designers to communicate how to use their a touch screen apps. As you saw when you opened this app, I used it to explain how to use this app works and in my opinion these icons do a great job. As more and more apps come out on smartphone and tablet devices that use touch gestures it will be important to display controls to let users know what to do. These icons provide a simple and easy way to do this.

Source: http://somerandomdude.com/2011/10/10/redesigning-gesture-icons-a-proposed-system/ & http://somerandomdude.com/work/cue/

54


Teux Deux Teus Deux is a very simple little web and mobile app for writing and organising a personal to-do list. It uses drag and drop controls and displays your lists in a clear weekly planner, the simplicity of this app is what makes it so welcoming to use. I have used this app for the past year and half to plan what I need to do each day and it works brilliantly. It has become an important element to my workflow and I’d be very disorganised without it.

Source: http://teuxdeux.com/

55


Twine Sensory Device Another crowd-funded Kickstarted project, Twine is a small device that detects information from several different sensors, including movement and temperature. It plugs into your computer and then using some software allows you to set up rules that trigger messages to your phone, email, Twitter and soon other services. This device lets non-programmers create interesting interactive programs with ease and that’s why I’ve included it within this section.

Source: http://www.kickstarter.com/projects/supermechanical/twine-listen-to-your-world-talk-to-the-internet

56


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.