Notes about Interactive Design
Notes of: SALMOND, Michael; AMBROSE, Gavin. The Fundamentals of Interactive Design. AVA Publishing: London, 2013
Interactive Design as a Discipline
Interaction as a medium expands and enriches traditional media.
Design as a two-way conversation: For the first time, the conversation between brands and audiences is two-way – people can share experiences and create their own content. User-generated content (UGC)
Designing engagement: All visual communication is about impact, audience engagement and the communication of a message. Interactive designers will experiment and innovate by using different technologies to engage the audience in new ways.
Make it remixable. Make it mobile. Design different.
The design document
Table of contents and an introduction: these describe the purpose of the project, scope, document organization, the audience, and terms and definitions.
A design overview: the project approach, goals and constraints, and the project’s guiding principles.
The design specifications: colours to be used, palettes, images, overall aesthetic and feeling.
Wireframes: the initial design prototypes, sketches, personas and scenarios.
Project architecture: the technical aspects of the project, the requirements for programming, hardware and software and how the project will be launched.
The implementation plan: this sets out project management requirements, time frames, costings and budgets.
Rules: these are the client-specific constraints (use of colours, logos and client-specific language).
Testing and usability: the plan of what is going to be tested, how the prototypes will be tested, and what metrics and measurements are to be used.
Assumptions and studio constraints: general values and implications of using a target audience. For example, if the project is a website, there would be an assumption that the client’s audience knows at least how to access a website and use a browser’s navigation system.
Ideas, Prototypes and Experiences
‘The ultimate inspiration is the deadline.’ Nolan Bushnell, founder of Atari ‘Good design is a lot like clear thinking made visual.’ Edward Tufte, data visualization pioneer
Denise Jacobs from alistapart.com created a fi ve-point guide to getting inspired:
‘Gamify’ your work: be playful when approaching a problem. Adopting a play-based approach to problem-solving creates a more open mindset that is less stressed and more open to inspiration.
Commit to overcome self-chosen challenges: if a project’s technical requirements seem hard to accomplish, spin that as a positive and use it as an opportunity to grow as a designer.
Set clear goals and actionable steps: break down any large, overwhelming process into smaller chunks that are more manageable. Create a reward system for when each challenge has been met (for example, once a task is completed, take a break or go for a walk) and this can become a great motivator.
Keep upping the ante: always remain optimistic and view each ‘failure’ in a project as a step towards the larger goal of creating that totally amazing end product. Focus on every positive achievement, as this adds to confidence levels and satisfaction in the job.
Make it epic: think of the struggle for inspiration as a personal ‘heroic’ struggle towards an end goal. Become excited about how the project could change lives or create a buzz amongst your peers.
Sketching and wireframing: Sketching is visual thinking; you don’t have to be a great artist or illustrator to be able to communicate or develop an idea using sketches. Industries and products can begin with a ‘sketch on the back of a napkin’ and so it is with generating ideas. Sketching formulates the essence of a project and begins the process of moving towards the end goal. Wireframing works similarly to sketching. For interactive designers a wireframe is a sketch that outlines a project’s interactive components. For example, for a website this could be navigation and layout.
The medium informs the design
‘If your user interface even vaguely resembles an airplane cockpit, you’re doing it wrong.’ John Gruber, creator of Daring Fireball blog
Create emotional contact and connection to the product.
Persuasion design:
Simplicity: Make it simple (even when it’s not). When designing an interactive project designers should ask themselves if the project can be summed up in one sentence. If it takes someone a few attempts to explain or contextualize the project, how is the audience going to explain it to others if they pass it on?
Unexpectedness: Violate expectations; designers need to take what users expect from a website or app and see if they can offer something innovative or new. This could be the interface, the theme or the aesthetic (if a pre-loader to a website is engaging, it sets up a positive reaction to the site before any content is served).
Concreteness: The core project idea must be explicit and direct. Everyone has influences and borrows from others; designers can embrace this and use it to shore up thematic or experiential aspects of their project. Once the experience is created, designers should not deviate from the ‘universe’ that they have created; stay true to the aesthetic and the concept.
Credibility: Prove your credentials. When launching a new project designers have to consider that the audience may have no knowledge of the company or service that they are promoting. Inventing or incorporating ways for a new audience to engage with the service is crucial. If someone uses the app or the service and then tells their friends on Facebook or Twitter, word gets around and the product receives credibility. How should designers consider this element in the design?
Emotions: Make people care. One of the best ways to engage an audience is by making them emotionally attached to the project. Can the emotional experience come from fun or from play? Or could it come from sharing thoughts, dreams, hopes and fears with others? Have these elements been considered in the design?
Stories: Enable the audience to feel. Experiences multiply and change as they are passed from one person to another. Each time the experience is passed on, it becomes richer and deeper. What stories are the design team telling and how does this inform the user experience?
User experience design (UX design) aims to design multisensory stimuli from which people can create their own meaningful experiences. UX design is relatively new; it emerged in part because of the advent of immersive, interactive technologies and their ability to engage beyond text and static images. An experience stays with people a lot longer than other media – it forms memories and positive associations with the product or brand.
UX roots:
Distinctiveness: Some of the best examples of experience design are spaces, such as museums and theme parks. Every museum and theme park has a distinct environment that can only be experienced by being there and by engaging with the stories in the environment. When a visitor sees an artefact in a museum cabinet, it doesn’t necessarily tell a story. The richer experience is one where interactive technology allows the story of the artefact and its owner to come alive in a meaningful and engaging way.
Enablement: Story and narrative are powerful communicators, but how does a designer ensure a positive experience? The solution is in creating a more engaging interactive experience. For example, a museum exhibition on Viking artifacts would usually display a helmet or clothing with a text description and image. A better experience would be an interactive mix of video, animation and context based information that shows the artifacts in everyday use. This would immerse the audience in the historical life of the wearer and it brings the object to life.
Relevancy: Part of being an interactive designer is understanding how to get into the mindset of a consumer. Designers have to be able to subtly manipulate consumers in order to make their experience as positive as possible. Designers can begin to explore what is relevant to the audience over time by delivering content and tracking what is useful to them and reacting to that feedback; it’s important to involve the customer.
4 Space: Where will people be using this project? Whether it’s in a museum, in Disneyland or in a bedroom, the design has to try to accommodate those spaces. The ability to think through how an audience will engage with the project is important. If the project calls for a touch screen in a museum, designers will need to allow for the different heights of users (a display that was five feet high from the floor would prevent an eight-year-old from using it). On-site visits are crucial to map where to best place the project for maximum impact (what is the space’s traffic flow? Where do most people stand when viewing an exhibit or ride?).
The Industry Process
Pitch types:
The request for proposal (RFP): Most studios are going to be involved in a request for a proposal. An RFP is a document sent by the client that outlines, often in detail, what outcomes they require. The studio then creates materials to answer the brief, and sends them to the client. This is a sort of blind taste test; there is no communication with the client, so the answer to the RFP has to stand on its own merits. If the materials are interesting to the client, the design studio is asked to prepare for a meeting with the client to pitch their idea.
The invitational pitch: The invitational pitch often occurs when the studio already has a relationship with the client and is invited to come up with a design solution for a brief; or the client may have been impressed by the studio’s previous work and invites them to a meeting. These kinds of briefs are often less formal and much less competitive. Even so, the client needs to be impressed and the pitch delivered in much the same way as for a competitive ‘open’ call for proposals.
Once a pitch has been accepted, managerial direction is required to help develop the idea into something tangible and workable. When creating products such as video games, websites or interactive installations, it is the job of an art director and project leader to communicate to the team the next steps involved in moving the project forward.
Audience, Usability and Testing
‘Personas work because they tell stories.’ Whitney Quesenbery, user experience expert
The upside of personas:
They establish common needs and goals for a disparate audience.
If a designer needs to add a new feature, they can refer to the persona to assess its usefulness.
Personas can streamline the production process, for example, it can target different users, so a project aimed at children and parents might be a different audience to teenagers or older people.
Personas can be a useful evaluation guide; the designers can refer to the personas as a method of avoiding intensive usability testing.
The downside of personas:
Personas potentially lead to an artificial sense of understanding of users, which may mislead the team development process.
Personas are not real people and so can’t talk back and ask questions; they are fictitious and artificial.
Personas may be a composite of a demographic- based audience; they lack distinction and individuality
The scenario: A scenario situates a persona in the process of using a product to assess its functional and aesthetic quality.
Usability in design is the process of designing a product so that the audience can use it easily and intuitively.
The eight rules of interface design:
Be consistent: Consistency is important when designing an interface or application. For example, on a website, a company logo is normally a link back to the front page. If this linkage changes based on where the user is within the site, it’s confusing.
Use shortcuts for frequent users: If a website or application has content that people return to often, make it easy for them to get to that content. For example, news sites allow users to choose the subjects they’re interested in, and sites such as Amazon.com store credit card details so customers don’t have to constantly re-enter the same information.
Design informative feedback: Feedback is a crucial part of the overall experience. For example, on a web page the text loads first and quickly, rich media loads slowly (e.g. videos), so ensure that the initial content has some value. A large media site may take a long time to load, so use pre-loader animations to show the user that something is happening.
Design navigation or dialogue with conclusions: A four-page news article, for example, should have a navigation system that links to pages 1, 2, 3 and 4. It should indicate which page users are on, so they can easily go backwards and forwards in the article, but also know the article’s length.
Design informative errors: Websites should be designed so that if a link is broken or a page is missing the ‘error’ (known as the ‘404 error’ page) that is displayed is informative. Users should be able to navigate back to the main site and the error page should be considered as content in line with the aesthetics of the site.
Design an ‘undo’ option: Anyone using a large website should always be able to get back to a previous page, track where they have been or move to the front page. Many web pages use a feature called ‘breadcrumbs’, which is a dynamic set of text links under the main navigation that allow users to track back to earlier content areas.
Design for individuality: People relate best to systems that they find easy to use. The interface should be so easy to navigate that the learning curve is minimal. An example is Apple’s ‘swipe’ interaction on the iPhone or iPad. Once the screen is unlocked by using one finger, users have the model for all other interactions on that interface.
Reduce any overload: Don’t have too many windows opening or too many tabs/options for users to navigate through or use. If elements are required, they should be added over time as users become more comfortable and experienced with the interface. Complexity should be added over time whenever possible.
Magic Number Seven, Plus or Minus Two principle: Any more than that and the chances are people forget the options they’ve been given. Therefore, if users are given too many options in a navigation menu it’s confusing and unusable.
The three-click rule: All content should be within easy reach of the user.
The two-second rule: If a user waits more than two seconds for some kind of response from an online application, they may assume it’s not working or become bored and impatient. This does not mean that the application has to be superfast; instead, the application should always feedback to the user, for example using a ‘now loading’ animation.
There are usability methods that consider how people read, interact, share and engage with content. Given that so many people have less time to spend on so many aspects of their lives, usability focuses on enabling the most rewarding experience as quickly as possible, while also allowing for deeper content to be delivered if desired.
‘The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.’ Jakob Nielsen, web-usability consultant
Usability and visual comunication:
Eyeline: Knowing where users are looking on a page or screen is a useful way of directing them towards important content. Faces are a great way of doing this; humans are always attracted to looking at faces. What’s interesting is that once users have locked onto a face, they tend to look in the same direction as the person in that image. If a designer wants to attract users to a certain area of the page (an advert, image or headline) this principle can work well.
Good design credibility: People are more likely to engage with a well-designed site because a good-looking site equates to credibility in the mind of consumers. People learn that good designs (products and images that look good and are well made) are more expensive than badly designed or shoddy products. This translates to media and websites. If the site looks good and relates well to the intended audience, people will instinctively trust the site and worry less about buying from the site. A simple spelling mistake or bad grammar (along with bland images) can be enough to make the site seem untrustworthy.
Don’t be afraid of white space: As with a visual composition, white space is important. When used wisely, it allows users time to look around the space without being bombarded with images and text. Visual clutter is very damaging, and projects that cram too much into their first screen have a slightly desperate feel to them. The white space doesn’t have to be white, it can be the background colour or space in-between paragraphs.
Rule of odds: As in the image above, the rule of odds creates interest or focus for any image or content that is surrounded by an uneven number of other content. Three is better than two or four in a composition, people find it more visually agreeable.
Symmetry/asymmetry: Symmetry in design can be achieved by placing like objects side by side to achieve balance and form. For example, four identical white vases on a shelf. Asymmetry disrupts this format and can draw the eye directly to an intended object. For example what if the third vase was much smaller and bright blue?
TETO: Test Early, Test Often