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.
Apple hasn’t cruised easily to the top; in fact, it
- 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.
to 29.7 million by second quarter 2010.
- Motorola spins off Motorola Mobility Holdings on Jan. 4, 2011.
up to 26.8 percent. The rise of smartphones
continues to trail nemesis Google’s Android in smartphone market share. But it shook up the
Effect on carrier competition and data use
was 10 percent according to Nielsen. Nielsen
industry and forced changes and upheaval among many competitors.
- Smartphone adoption in first quarter 2008
- In 2006, Verizon Wireless had 7.7 million new subscriber additions compared to
predicts smartphones will outnumber feature 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
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.
- Worldwide smartphone sales will hit 468
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 system on Oct. 21, 2008.
and amortization went from 34.4 percent in 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