June 30, 2012InteractiveInterfacesPrototyping EditorialLayouts for MobileDevicesChristine Callahan, Masterstudio Design (MSD)Fachhochschule Nordwestschweiz, Basel
EXHIBITION1 My research topic is focused in creating digital interactive interfaces. These interfaces, derived from print editorial layouts, are prototyped for mobile device interfaces. Print page layouts were designed in direct response to printing limitations and therefore digital page layouts must be designed in direct response to technical limitations.
Section 1EXHIBITION Interactive Interfaces Prototyping Editorial Layouts for Mobile Devices My research topic is focused in creating digital interactive interfaces. These interfaces, derived from print editorial layouts, are prototyped for mobile device interfaces. Digital magazines have yet to reach their fullest potential. Popular digital editorials such as The New York Times, Time, GQ, and Popular Science translate almost identical mental models of printed documents to the mobile application. However, this is not appro- priate. Print page layouts were designed in direct response to printing limitations and therefore digital page layouts must be designed in direct response to technical limitations. Digital publishers must maximize the potential of the digital device and create an experience that transcends paper. I propose that designers be encouraged to think of digital pages as a 3D space or a 2D plane. The space need not be conﬁned to the dimensions of a screen. Text and im- ages can ﬂow into other pages. Page transitions can be animated. Tradi- tional perspective and orientation can be challenged. In order to achieve this new perspective, designers must maximize all technical capabilities and digital publishing possibilities. I have embarked on a two year- investigation concerning which digital publishing platforms and interactive programs best maximize this type of interactive reading experience on a mobile digital device. 2
PROTOTYPES2 To demonstrate differences between the print and digital medium, I reference the FHNW’s Masterstudio Design Thesis No 5 print catalogue. The design task is to translate the editorial print layout to the digital medium while carefully preserving the visual style and maintaining the target audience.
Section 1PROTOTYPES TOUCH APPLICATION PROTOTYPE >>> Apple Keynote This touch application prototype (TAP) was created and published using Apple Keynote. All animated components and transitions in this prototype were created using strictly preset animations, transitions, and interactions in the Keynote software. For the purposes of this slideshow presentation, the TAP has been converted to a movie ﬁle for quick viewing. On a digital tablet, however, the user can control the pace of the TAP and select hyperlinked images jump to other parts of the magazine and read in a non-linear fashion. 13
VISIONARY PROTOTYPE #1 >>>Adobe After Effects, Apple KeynoteThe animated content in this prototype was made using Adobes visualeffects and motion graphics software, After Effects in combination withApples Keynote. This is a visionary prototype, not intended for userevaluation. It demonstrates animated and interactive capability thatdigital publishing software should be able facilitate. It also suggests thatthat digital publishers have only begun to tap the surface of designinginteractive editorial layouts for mobile device interfaces.In my research, I deﬁne a set of design methods, generated as a meansto break conventional notions of a page. This prototype exhibitsmethods of:*Thinking of the Page as a Limitless 2D Plane*Zooming and Panning*Kinetic Typography*Animated Page Transitions 14
VISIONARY PROTOTYPE #2 >>>Adobe After Effects, Apple KeynoteThe animated content in this prototype was made using Adobes visualeffects and motion graphics software, After Effects in combination withApples Keynote. This is a visionary prototype, not intended for userevaluation. It demonstrates animated and interactive capability thatdigital publishing software should facilitate. It serves to demonstrate thatdigital publishers have only begun to tap the surface of designinginteractive editorial layouts for mobile device interfaces.In my research, I deﬁne a set of design methods, generated as a meansto break conventional notions of a page. This prototype exhibitsmethods of:*Thinking of the Page as a Limitless 3D space*Zooming and Panning*Animated Page Transitions 15
PROJECTSUMMARY3 Popular digital editorials such as The New York Times, Time, GQ, and Popular Science translate almost identical mental models of printed documents to their mobile application. There may be slight means of improvement, but the general layout concept remains the same.
Section 1PROJECT Popular digital editorials such as The New York Times, Time, GQ, and Popular Science translate almost identical mental models of printed documents to their mobile application. There may be slight means ofSUMMARY improvement, but the general layout concept remains the same. Instead, designers must generate layouts designs that best compliment the medium of viewing. Print page layouts were designed in direct response to printing limitations; digital page layouts must be designed in direct response to technical limitations. It is not enough to convert static pages into digital form, adding interactive components and video animations as they seem ﬁt. Instead, interfaces must be reconstructed PROJECT AIMS speciﬁcally for the interactive, digital medium of choice, while also pre- serving what is pleasing about the printed word. Publishers can utilize the world’s most modern, innovative devices, but their success will be limited unless they rethink their business and layout content models. 1. Redesign editorial layouts specifically This will maximize the potential of the digital device and create an for the mobile digital medium experience that transcends paper. Using sophisticated interaction and 2. Maximize potential of the digital inter- animation programs, this research investigates methods for creatively translating editorial layouts to mobile device interfaces in an effort to face by prototyping interactive layouts push boundaries and challenge ideas of the conventional page. that transcend paper I have embarked on an investigation concerning which digital 3. Outline a set of design methods in- publishing platforms and interactive programs best maximize this type tended to break the print mental model of interactive reading experience on a mobile digital device. I draw 4. Maximize all technical capabilities and comparisons between animation and interaction programs such as Adobe After Effects, Apple Keynote, and digital publishing platforms digital publishing possibilities such as Indesign 5/ 5.5 and iBooks Author. Each program offers a 5. Determine best prototyping software range of interactive and animation possibilities that can enhance the available for digital publishers digital “reading experience.” By using these programs in combination with one other, I demonstrate new and innovative, interactive layouts 17
and envision possibilities for future media development. Thorough ex-tensive experimentation and research, I determine which program/soffers the best potential for engaging interactivity.In order to demonstrate key differences between the print and digitalmedium, I reference the Fachhochschule Nordwestschweiz (FHNW)’s“Masterstudio Design Thesis No 5” print catalogue. The design task willbe to translate the editorial print layout to the digital medium whilecarefully preserving the visual style and maintaining the targetaudience. This is a task digital publishers aim to achieve in translatingprint editorials to the digital device. While designing the user interfaceand interaction designs is certainly one objective, the other is consider-ing usability of a touch application prototype (TAP). A ﬁnal working TAPis exhibited on an iPad and iPhone alongside the Masterstudio’s ThesisNo 5 print catalogue. This way, readers can compare the print and digi-tal layout formats against one another. It is important to see andunderstand why separate mental models must be designed forseparate reading mediums or else one mental model designed toappear harmoniously across multiple mediums.Project MentorsRalf Neubauer, Institut HyperWerkSuresh Surenthiran, ICT HGKViola Diehl, Institut Visuelle Kommunikation 18
INTRODUCTION4 The future of reading is changing rapidly. The written word is being transformed into a multi- media, interactive, digital experience. A designer must keep up with changes in the industry and learn ways to creatively use the new technology while speculating new ways it could be used.
Section 1INTRODUCTION The future of reading is changing rapidly. The written word is being transformed into a multimedia, interactive, digital experience. Magazines, newspapers, and books are being read on digital tablets, phones, and other smart platform devices. A designer must keep up with changes in the industry and learn ways to creatively use the new technology while speculating new ways it could be used. In just a few short years "reading," as we know it, may be dead. The structure of the printed page, which has been valued and perfected over hundreds of years, is going through a process of change as revolutionary as the manufacturing of printed texts by Johann Gutenberg in approximately 1439. One of the driving forces of this change is the technological revolution onset by digitalization. It is not yet certain how this revolution will affect the ﬁeld of digital publishing, as designers have only begun to experiment with methods of interactivity on smart platform devices. However, one thing has become clear; in the near future, we will not simply be reading content, but also interacting with it and “experiencing” it on the page. Just as much time will be spent designing the visual and interactive elements, as there will be proofreading text for grammar. The relationship between authors, designers and software developers will become close. According to futurist and innovator of the digital revolution, Mike Walsh, “creating a book in the future will be closer to producing a movie or a video game. Companies will need to rebuild their design teams. One team will be in charge of visual production, another application development, and oth- ers in mobile distribution, and social awareness. Walsh concludes, “The simple days of a writer, an editor and a royalty contract are almost at an end.” Some publishing houses are even engineering digital editori- als into movies; in 2005, Random House US and Focus Features de- 20
cided to form a partnership called Random House Films, which would tions, and craft just the right experience for users. In user research,do just this. It is possible that the line between movies and digital designers must consider the expectations of readers and advertisers.books will become somewhat blurred in the near future; however, the Understanding speciﬁc expectations and interests of the digitalkey feature that sets them apart is user interaction (Walsh). magazine can give valuable implications for product development.According to predictions in the U.S., 25% to 50% of the market share In short, there are many complexities and challenges in creating a richwill be digital by 2015. This is in response to the digital media digital reading experience. It is risky, and there is never any guaranteerevolution, fueled by rapid growth of the Internet and proliferation of for success. Even if evaluation feedback comes back positive,handheld devices. No longer has disseminating knowledge and publishers might not anticipate competitive product experiences, whichinformation become the only priority, but so has enhancing the “reading stick closely to print mental models. Despite becoming a thing of theexperience”. As reading practices evolve into the digital scene, we can past, print mental models have proven the test of usability andexpect a new kind of reading, one that offers great potential for readability over a long period of time. Readers will often choose anengaging users and achieving a fully sensory experience—an experience with the most reliable source of usability and readability inexperience that transcends paper. However, the transition from print to lieu of an alternative, engaging experience. Therefore, in an effort todigital is not always easy and efﬁcient, especially as designers attempt break away from the print module, designers must strive to maintaincreative design risks and innovate with new software. optimal usability and readability in any new and engaging interactive reading experience (Thompson, Walsh).For publishers, this transition means a whole new set of skills to build upin-house or freelancers to outsource design and development to. It also In order to strike this careful balance, a detailed vision must be estab-means frequent testing of usability. It is not enough to wildly experiment lished from the start. Initial ideas must be sketched out on paper andwith multimedia content and achieve some fantastic result, only to ideas must be discussed as a team. Designers must consider exactlydiscover a major usability ﬂaw. Therefore, extensive usability research what will make this experience unique and how it can be designed tomust be carried out, usability evaluations conducted, and necessary be interactive; all potential problems must be taken into account. In thisiterations made throughout the design process. Optimal usability is not research, I propose that designers think of the digital page as a 3Dachieved by considering only Interface Design (what the user sees and space or a 2D plane. The space need not be conﬁned to thedoes on the interface). User Experience Design accounts for how users dimensions of a screen. Text and images can ﬂow into other pages.access the interface, what they do when they leave, and whether or not Page transitions can be animated. Traditional perspective andthey return to it. One of the leading principles of user experience de- orientation can be challenged. These changes, which beﬁt the digitalsign is incorporating user feedback into the design process; user feed- viewing medium, serve to challenge traditional, preconceived notions ofback helps the interface designer to comprehend problems, derive solu- 21
the “page”. In order to achieve this new perspective, designers must advance. Magazine advertising is considerable more expensive thanmaximize all technical capabilities and digital publishing possibilities. newspaper advertising.Every medium for reading has its possibilities and limitations. Whether it Poor printed image quality is also an issue; visual information can easilyis a printed book, a billboard sign, or a television advertisement, the be lost in the printing process. This is a major concern for companiesmedium must be carefully considered throughout the entire design who rely on pixel perfect images to sell their product, such as high-endprocess. For the print medium, size limitations, packaging constraints, clothing sellers or photography artists. Companies who rely on printand printings costs must be taken into account. Everything designed processing are advised to drive customers to a website with high-for print must ultimately be printed or packaged into measurable print resolution images. In general, lower quality images are less attractive,page spaces. Naturally, this determines the way text and visual and companies may lose clients to competing companies who use digi-information are organized, otherwise known as “information design.” tal processing.Consider the printed page of a magazine. Columns of text are arrangedside by side with pictures placed strategically in between. Photographs As a result of such challenges, it becomes more expensive and difﬁcultspan over two pages or fold out into a third, or perhaps into a poster. to distribute print media than electronic media. In an ever-changingThe motivations behind these print layout design choices are all and fast-paced world, users crave information at their ﬁngertips. Withdetermined by printing limitations. the advent of electronic media and the Internet, users are less inter- ested in reading outdated print editorials. Supplying readers with theFrom the marketing perspective, the shelf life of any print medium is most up to date information and at fast speed is substantial motivationlimited. Newspapers are in the public eye for one day, whereas online for translating layouts to mobile device interfaces.news sources can target a global audience for an unlimited amount oftime. Printed sources may not always be accessible to a target group, These printing limitations become nearly obsolete when designing forand this limits readership. By limiting readership, publishers cannot the digital medium, and publishers are taking advantage the newreach potential clients. However, the Internet can be accessed from possibilities. For one, print media uses up valuable resources, such asanywhere, and potential clients have a better chance of gaining access paper and ink, which are not consumed by electronic media. Thisto relevant information. Advertising in print media can take months of means that more illustrative content can be incorporated in digitalpreparation, and there is less ﬂexibility. Print sources become quickly publications without the consequences of high price. It also means thatoutdated, as it is impossible to download an up-to-date version. Adver- magazines can spread out over the course of hundreds of pages, totisements are a costly consequence for print based productions, and showcase an entire gallery of pictures. Furthermore, electronic mediathey only have a short life. It can be tricky to schedule months in can be continuously updated, unlike print sources. If content becomes outdated or errors arise, digital publishers can republish the content. If the magazine is published as an application, the digital publisher can 22
prompt an update to readers, so they may download the most up to interface solutions, they will achieve greater success in their ﬁnaldate version. Conclusively, it more difﬁcult and expensive to distribute product. The conception phase must focus on appropriate and creativeprint media than electronic media, and this is a key motivator in interface solutions that abandon the print-based mindset. A designertranslating layouts to mobile device interfaces. who breaks away from the conventional way of thinking might animate text instead of organizing it into columns; organizing text into columns isGiven the new possibilities of digital media, more content and a design strategy made in response to printing limitations. It is easy toinformation can be shared than ever before. Potential new viewing design according to the print mental modal; after all, it is a structuremethods can be achieved. The digital page can be reconstructed and society has been accustomed to. In order to break conventional ideasconventional notions of a page can be broken. Visual layout effects can of the printed page, perspective and orientation must be challenged inexperimented with and a page or “space” can be constructed to creative ways, allowing the reader to lose sight of reality and becomeappear as a two-dimensional plane or three-dimensional area. Upon fully immersed in a digital interface.rotation of a smart device, a page might pan inches above and aroundthe page, while still residing within the medium’s viewing frame.Now, with the ability to utilize the world’s most modern, innovativereading devices, publishers have begun translating print layouts tonewer and shinier screens. However, this has not been achieved socreatively by leading publishers, despite access to the most currentinteraction and digital publishing software. Many digital publications,while impressive in some ways, stick very closely to the print model. Bycommon interface design standards, this is not so impressive; thecontent is being considered over the medium. Instead, the mediummust be considered before the content. Exhibiting information on a newplatform, whether it is a computer, a digital tablet, or a smart phone,prompts new methods for design. In digital publishing, the editoriallayout and content must be crafted in accordance to the new platform;otherwise, it jeopardizes the user experience.Unless digital publishers rethink their business and content models,these innovate results cannot be achieved. If publishers place greaterpriority in a product’s conception phase and determine appropriate 23
BACKGROUND5 While this research focuses primarily in User Interface and Interaction Design, it is important to understand the relevance of disciplines such as User Experience Design, Visual Design, and Motion Graphics Design, which all play an integral part in the design process.
Section 1BACKGROUND It is important to understand the ﬁelds of design that are relevant to this investigation. These design ﬁelds are central to the role of future media in our society. Each focus has a set of stipulations, which adhere to current design principles. These guiding principles direct the execution of my design work. While this research focuses primarily in User Interface and Interaction Design, it is important to understand the relevance of disciplines such as User Experience Design, Visual Design, and Motion Graphics Design, which play an integral part in the design process. User Experience Design (UX) There are a few central ideas to user experience design (UX). Some would say it is the idea of how a user feels when experiencing a product for the ﬁrst time. Others determine user experience by whether the user enjoys the product experience. It is a discipline that covers many areas of concern, ranging from usability, contextual inquiry, user research, and design. There are several leading UX principles, which affect digital product development, usability, and reception. Some of these include limiting distractions, providing context, providing signposts and cues, making actions reversible, and providing feedback. Perhaps the most important question to consider in UX is: will users want to use this product again? From a marketing perspective, this is a primary question. According to one of the world’s most inﬂuential designers and writers, Don Norman, “It doesn’t matter if you used a device a hundred times successfully—you will remember the unsuccessful attempt” (Norman). Maintaining customer loyalty is a challenge. If a product does not hook users from the start, the user may 25
be unlikely to return to it; and even if the product is initially successful, it Current trends must be researched, as they are subject to frequentmust maintain its appeal or else lose users to competition. change. Noticing trends across all ﬁelds of design and technology is necessary, as they are interrelated. In 2012, trends in InternetA UX designer doesn’t deﬁne a problem before ﬁrst trying to solve it. navigation, directly affected the digital publishing industry. The InternetThe process of solving a problem by asking questions, conducting became hyper-personalized, allowing users to create a uniqueresearch, and performing evaluation studies, will lead him to a valid collection of content; digital publishers capitalized on this trend byresearch question. A UX designer cannot start a project without ﬁrst developing applications allowing users to create their own personalizedasking, why? What problems must be eliminated in a product or product publications. An example of this was “Zite,” a personalized magazineexperience? By ﬁrst understanding the design problem, a UX designer for the iPad. This application takes a user’s interest from platforms suchcan appropriately determine strategies for viable solutions. as Twitter and Google reader in order to create custom content. It helps users to pick categories and content that they will enjoy and allowsFor a user experience designer, strategy is key. It is not enough to them to add custom content.focus on the design, but to identify a strategy for supporting anexperience that addresses user needs and business goals. A One of the most important principles of UX design is incorporating usersuccessful strategy will focus not only on what the user sees, but how feedback into the design evaluation process. A UX designer cannotthe user will get there, what they do when they leave, and how they will base a design solely on intuition; he must talk to users and gain evalua-feel about it a week later. tion feedback. Without real user input, a user-centered design is des- tined to fail. Designers must co-evolve the system with its users. AA UX designer must be able to identify his target audience. A target UX designer who works alone is no UX designer. Even a UX team ofaudience cannot include everyone, and a successful UX designer one should rely on mentors, visual designers, developers, marketers,would be able to narrow the target. After all, a product that works for and other experience designers for individual feedback. The design iseveryone, essentially works for no one. Substantial UX research must not intended to please the designer and cannot make design decisionsbe conducted in order to learn as much about potential users as based on personal preferences, the product isn’t meant for the de-possible. UX designers must be able to articulate their users’ goals. It signer, and so must test (its effectiveness) with potential users.is not enough to understand problems that users are experiencing, butto craft a solution that will truly support their efforts. Research of To do so, a user experience designer must also run evaluation anddifferent methods will help guide designers to the right solution. Use testing after a working application or prototype has been completed.Case Diagrams (UCDs) can be made to illustrate user goals and use Usability testing can be conducted through Cognitive Evaluationcases, ultimately informing reviewers about what the system should do, Methods (Walkthroughs, Questionnaires, Interviews) and Heuristicnot necessarily how to do it. Evaluation Methods (Focus Groups, Think-Aloud Protocol). Proper 26
methods of evaluation and testing will best inform researchers exactly them to play out before continuing. These animated components mightwhat users like or dislike about a product experience. This allows an appear as introduction sequences or page transition sequences. Atinteraction or interface designer to make the necessary iterations to best, the user should either be able to skip over these animatedtheir design and craft the best user experience. Without consideration components or control their play length; otherwise, reader-controlledof user input to the system’s design revision cycles, it cannot be pacing is jeopardized.considered a user experience design process. There are several elements of user experience. This diagram showsIn the digital publishing realm, creating a user experience that how other design disciplines, such as visual design, interface design,competes print publications is not so easy. Print publications are a interaction design, play a part in the user experience:major source of competition; they have been nearly perfected indelivering information for thousands of years. Print publications havecertain features that perhaps impossible to replicate, but developershave made attempts to deliver a product that was just as well formattedand easy to use. A soft grey “faux screen” was introduced to e-readers,which resembled the look and feel of paper. In some ways, this was animprovement to the user experience, improving the eye-comfort ofreaders.One aspect of UX design to carefully consider in the design of digitalpublications is “reader-controlled pacing”. This allows users todetermine the speed at which they move through the material. Userscan pause, re-read and reﬂect on what they have read or seen ornavigate back and forth through pages. While standalone movie clipsand animations proceed at their own pace, digital magazines puts thereader in charge of pacing. The reader can pause at any point to lookclosely at an image or re-read a certain passage. However, with maga-zines that are magazine/ﬁlm/animation hybrid, a greater level ofcomplexity is involved. The readers must be able to touch and controlvisual and animated components; this is not always the case. Someanimated components cannot be controlled, and the user must wait for 27
task importance and guide the user through the system (Visual Hierar- chy). These visual cues will allow the user to determine the next courseAs this chart illustrates, interface and interaction design play an integral of action (Affordance). The visual scheme must adhere to the userpart in the User Experience process. These are the two primary areas model and allow the user to customize the interface (Visual Scheme).of focus in this design research, and these are explored further in the Lastly, efforts for task completion must be minimized. Factorsnext section. interfering with task completion would be unnecessary interface complexity or performance. Another interference would be memoryUser Interface Design (UI) overload. If the user is expected to remember too many things from one action to the next, it may dissuade him from interacting with theA user interface designer must deﬁne how the user acts with the interface altogether. In order to ensure these principles are successfullyapplication’s functionality. Priority is placed on information visualization, carried out, user-interface testing must ultimately be performed. Activedetermining how information organized and how quickly and easily the users ﬁnd defects in the product or prototype, and interface designsinformation can be communicated. This can be illustrated through User make iterations to the design (Tullis).Interface Flow Diagrams (Storyboards). Flows are just as important togood interfaces as the prototype is. A speciﬁc sequence of actions Interaction Design (IxD)must lead users through the prototype in order to complete a certaintask. Without ﬁrst seeing the bigger picture, high-level relationships and Interaction design is a human-centered ﬁeld. It is a form ofuser interactions can be overlooked; therefore, user interface-ﬂow communication creating a dialogue between a person and a product,diagrams help to determine whether or not the user interface will be service, or system; structuring this dialogue, however, can be difﬁcult. Itusable. must be structured according to human behavior, and anticipate certain behaviors in response to any particular action. Therefore, interactionWhen designing for the user interface, an interface designer must designers are trained to understand the human experience and balanceadhere to fundamental UI principles or “heuristics”. There are many complicated ideas. They are responsible the development of human-different heuristics, but they all refer to similar principles. First, the centered designs creating of a framework which helps humanizeinterface must be made pleasing to the eye; this means eliminating technology. Interaction designers are not stylists; they do not prioritizevisual elements that don’t contribute directly to visual communication. the creation interfaces. However, the creation of ﬂashy or “prettyToo much visual information is overwhelming and displeases the user; interfaces” is one of the most common misuses in this ﬁeld of design. Auser interfaces must promote clarity and visual simplicity (Subtractive primary concern for interaction designers is developing interactive prod-Design). Additionally, the interface must be simple and intuitive to use. ucts or prototypes that are usable. Therefore, interactive designs areVisual cues, such as color, size, and contrast, may be used to convey 29
always grounded in some insight about people and are applied to real- video and ultimately transforms into a cover design based on a printworld human problems. In designing usable interactive products, an mental model. While it has not completely escaped the print mentalinteraction designer must completely understand what kind of activities model, the magazine has demonstrated a unique method for incorporat-users are performing; he must understand them so well that he can ing interactivity by involving other placed, interactive components.anticipate multiple outcomes for all potential scenarios. It is important to understand the different between prototyping andSome common heuristics in mobile interactive design metrics are developing interactive experiences. By creating the illusion of a work-consistency, ﬂexibility and efﬁciency of use, minimalist design, real-time, ing product through prototyping, viewers can engage with a product atand recognition. Users should not have to speculate whether different as through it were a real, functioning application. In order to become awords, situations, or actions mean the same thing. Advanced features real, functioning application or system, however, the prototype mustshould be optional and used in order to facilitate a better experience. ultimately be developed. However, developing an application or systemApplications must anticipate both novice and advanced users, and requires a substantial amount of work, so designers are expected tosupport learning for both types. Aesthetic and minimalist design should work out all design and usability issues prior to the development stage.be used; including irrelevant information only diminishes its relative Prototyping helps designer to craft better experiences. People arevisibility. Furthermore, application and prototypes must allow the user to working in a world of rich, dynamic interfaces, both on the web and oninteract with real-time information. All objects, actions, and options our devices, and the experiences we design are interactive, responsive,must be visible and recognizable. The user is not expected to and have emotion. Prototypes allow designer to articulate the feelingremember information from one part of the system to another, and and function of a design in a way that a mockup or wireframe cannot.instructions for use of the system should be made available. However, one must determine -- what makes an effective, interactive prototype?Consider a video animation, which also functions as page transition.The video does not simply serve to aesthetically please, but also to Interactive interfaces must ultimately be tested on users and evaluated,enhance user interactivity. In current digital publications, many video according to common evaluation standards. In order to do so,animations are placed in page layouts as an added feature, and serve interaction must be demonstrated as an effective, working prototype.no other function but to enhance the informational content. Video An effective prototype will allow users to engage with interactions to aanimations (and other interactive components) rarely contribute to the realistic way. There are several ideas of effective prototyping. Effectiveoverall interface or interactivity of the application. One digital publisher, prototypes are fast. They use techniques that allow for rapid iteration.however, has realized the potential of video animation in enhancing They are disposable and reusable; once a design idea has beeninteractive layout spread. Viv Magazine released a featurette of digital communicated, the prototype deliverable can be discarded or parts of itmagazine motion cover for the iPad. The digital magazine opens with a reassembled into a new iteration. An effective prototype is not 30
burdened with the prospect of working with production-level code. Asnew prototyping tools have emerged, designers are able to avoid using Motion Graphics Designproduction-level code, which only slows the prototyping process; Motion graphics is a term used to describe a broad range of solutionsmultiple masterpieces can be created and at great speed. Effective that graphic design professionals employ for creating dynamic andprototypes are also focused. Interaction designers must select effective communication design. A motion graphic designer must haveinteractions of the design that absolutely need to be prototyped. By combined talents in design, animation, information architecture, andprioritizing interactions, this maximizes an interaction designer’s time ﬁlmmaking. As the demand for Internet design has proliferated, so hasand energy (Kolko, Conners). the need for designers with motion graphic animation skills. There are both 2D and 2D motion graphic designers. In ﬁlmmaking, it is easy toVisual Design (UX/Visual Design) avoid 3D motion design work; however, this is not always the case when designing motion graphic animations. This design research reliesThis involves designing the visual elements for mobile applications and heavily on the motion graphics and animation software, Adobe Afterdevices, such as applying the style, the look and feel to the design. The Effects, in order to demonstrate new methods for interactive interfacesuser experience/visual designer must consider whether his work is (Byrne, Curran).stylish and current with design trends and most importantly, whether theuser can interpret visual information easily and intuitively. This is not aresearch focused in visual design. However, in adapting visual designs Future Mediafrom print to the mobile interface, a solid foundation in visual design is This research deals largely with future media. It makes predictions ofrequired. In translating print designs to mobile device interfaces, all the future of interactive interfaces, ultimately exhibited through twovisual elements must be carefully considered. A user experience/visual visionary prototypes; these visionary prototypes were not prototyped indesigner will determine how existing visual design are adapted to the accordance to usability standards. On the contrary, they weredigital layout, and how signiﬁcantly they are changed before losing their prototyped in order to illustrate potential methods for digital publishingvalidity. As user experience/visual designer, it is sometimes necessary in the future, using advanced motion graphics software, Adobe Afterto create new visual components, such as buttons and hyperlinks that Effects. Advanced motion graphic capabilities are not available throughwould not otherwise have been present in the print version. These are use of contemporary interactive and digital publishing programs;otherwise known as visual components of the “Graphical User Inter- however, animated components can be placed. Contemporary pro-face” (GUI). Without the design of these visual components through grams allow for placement of advanced motion graphics, so long asvisual graphics software, such as Adobe Photoshop or Illustrator, other they are in placed with the proper ﬁle format (H.264/.mp4 > .m4v). Thisvisual components may lose their signiﬁcance. research proposes that interaction and digital publishing programs of 31
the future will allow for designers to create advanced motion graphicsinternally; two visionary prototypes have been created in response tothis proposition. The aforementioned design ﬁelds are central to the role of future mediain our society. Future media is used to analyze and state the future ofdigital, social, and mobile media. Without it, designers cannot possiblystay ahead of design trends and anticipate large changes in the futureof technology. Well before the end of the 20th century, it was clear thata digital reading revolution would occur. People had been predictingdigital methods of reading, some even through use of a tablet. Thosewho made these predictions and designers who believed in them wereable to stay ahead of the curve; in turn, they became forerunners of thedigital publishing revolution (Wilber). ---Prior Work & ExamplesIt is important to stay up to date with digital publishing trends. This One example of a digital magazine that is headed in the right directionincludes research of endeavors in the print and digital publishing is Viv Magazine. In 2010. Viv Magazine released a demo showing howindustry and predictions of for applications of use. According to one a future version of their interactive magazine might look and titled it,source, which determines the best iPad apps, “No ones really made the “VIV Mag Interactive Feature Spread – iPad Demo.” The demo providesslam dunk tablet magazine yet, but if you want to get a sense of how the an amazing example of how motion, interaction, and editorial contentmagazine of the future might look, Wired is leading the pack” can come together to create digital content. As a means to achieve(Vanhemert). Yet if we take a look at Wired, one of the leading digital in- creative transitions and page spaces, co-directors Cory Strassburgerteractive magazines, we see the same mistake—digital pages that look and Ming Hsiung made a motion picture ﬁlm. While this endeavor takesand act like print pages. Many other current digital editorial are exhibit- more time to create than standard content layout, they believe that if aing the same mistake, such as The New York Times, Vogue, and GQ. software program or publisher can facilitate one to two of these mixed media approaches, this type of layout design will trend. 32
Everything about this interactive magazine breaks from the conventionalidea of a “page”. For one, it demonstrates a perfect example oftransforming the page into a scene. The viewer feels as though he isnavigating through a city, not a magazine. The three-dimensionaleffects help to achieve this. While this is merely a prototype and not aworking model, it marks a real forward way of thinking. The demobegins by, accompanied by dramatic music and sound effects. Weretreat out of the room and in between buildings, scaling heights asquickly and deftly as Spiderman, until we zoom into another window.Page transitions stop and start as we seeming navigate through thepages.Viv Magazine also released a featurette of digital magazine motioncover for the iPad. This magazine motion cover was both entertainingand informative. The motion cover, also ﬁlmed by co-directors CoryStrassburger and Ming Hsiung, leads to page, which resembles a printmental model of a magazine cover is traditionally formatted for print.While this design hasn’t entirely escaped the print mental model, itdemonstrates a unique vision for incorporating motion graphics, whichdirectly support interactivity of the interface. Furthermore, it alters theuser’s perspective in such a way that the cover is no longer perceivedas still print cover, but rather the last frame in a motion ﬁlm, frozen intime. 33
Everyone was amazed at the Alice in Wonderland ebook. It was morethan just a book on a tablet. It suggested a completely different way offorming content and demonstrated strengths of a new medium. Therehave not been many other brilliantly interactive publications like thissince the launch of the iPad. Wired exhibited the best interactive publi-cation, but in many ways it was still a let down.Users who interact with “Alice for iPad” can make Alice grow as big as ahouse or shrink to just six inches tall. They can play with White Rabbit’spocket watch, and see how it realistically swings and bounces. Thisrealistic movement, offset by user interaction, is possible through use ofthe iPad’s internal accelerometer. While it is not easy for interactiondesigners to mimic effects of the iPad’s accelerometer, developers can.While designers and developers have exhibited limited use of theaccelerometer in digital publications, it is sure to become moreprevalent. 34
Prezi is a software that offers cloud-based presentations and offersamazing new potential for slide based presentations. With a zoomablecanvas, viewers can better understand ideas and the connectionsbetween them. The result is visually captivating presentations that leadusers audience down a path of discovery. Prezi co-founder, AdamSomlai-Fischer, who is also an information architect and visual artist,found that a zoomable user interface (ZUI) enabled him to explore the“big picture” overview of a ﬂoor plan and then zoom into the detail ofindividual rooms. Because there was no commercially-availablezooming presentation editor, each presentation had to be coded byhand. Adam created a prototype of the Prezi, which was laterdeveloped so that anyone could make zooming presentations.While Prezi may not be an example in digital publishing, it provides aworking example of interfaces with capabilities for user-intuitive,interaction design. A user might zoom in and out of the Prezi “imagemap” or canvas to read through a series of the paragraphs. Instead ofviewing content in ﬁxed dimensions, the reader can zoom in to receivepixel perfect detail and resolution and zoom out the see the big picture;this is not always the case with content in digital publications. Oftentime, users can only zoom into a speciﬁc photograph; but with Prezi,users can zoom into the interface as a whole. This would proveespecially useful in editorial print layouts for mobile devices, such as if auser needed zoom into a speciﬁc word or phrase in order to see moreclearly. 35
DESIGN METHODS6 Before investigating which different digital publishing platforms and interactive programs to use, I deﬁned a set of creative methods, generated as a means to break conventional notions of a page and challenge the user’s sense of perspective and spatial orientation.
Section 1DESIGN METHODS Before investigating which different digital publishing platforms and interactive programs to use, I deﬁned these set of creative design methods, generated as a means to break away from the print mental model . Animated Page Transitions In reconstructing page layouts to beﬁt the mobile device interface, there is another facet to consider, and it can be easily overlooked; this is designing page transitions. By deﬁnition, a transition is a change from one form or type to another, or the process by which this happens. A well-designed transition takes the user from point A to point B very quickly while conveying the path they have taken. Transitions are common in interface design; touch, movement, or physical handling can trigger them. They can also be triggered by navigation through the interface of an application or Web content. A transition should be designed to give the user a sense of their virtual position or location within the interface. In the past, designers and information architects have not been so concerned with how pages transition from on another; their priority was loading the page itself. Now that speed has improved over time, designers can provide more immersive transitory experiences across multi-media platforms. However, in many interactive transitions, users are still limited to “previous” and “next” buttons or a simple, animated page ﬂip; sometimes these page ﬂips look and function exactly like a real print page, presenting yet another example of how designers struggle to let go of the print model completely. While perhaps interactively interesting, a digital page that looks and acts like a real page does not demonstrate a real forward-way of thinking; it is not constructing layouts in accordance to a new medium. 37
With new developments in HTML5 and CSS3, transitions have become animated shorts, placed to act as transitions, or presets from interactivemore important. Now interfaces can transition in different directions and digital publishing programs, they must somehow reorient the user’s(left, right, up or down) or perform simple animations (fade, scale to perspective and demonstrate creative ways of using the digital medium.size, rotate, ﬂip, bounce). However these are very simple methods oftransitions, and they have been greatly overused. Perhaps the most Zooming & Panninginnovative approach to editorial page transitions was Viv magazine’sfeaturette of digital magazine motion cover and interactive feature Certainly, Adobe InDesign CS5/5.5 and the Adobe Digital Publishingspread. Co-directors of these motion feature spreads thought ten steps Suite allow designers to create content that enable users to pan andahead; instead of designing new and creative animated transitions, they zoom into content. However, this can only be done using Adobe’sproduced a short motion picture ﬁlm. In itself, a motion picture ﬁlm is a Overlay Creator, allowing users pan and zoom in on a speciﬁc, isolatedseries of animated transitions. By stopping and starting the motion ﬁlm component; this zoom and pan effect cannot be applied to the entirethrough the reading process, it created a sense of multiple-page page layout. In contrast, “Prezi- The Zooming Presentation Editor”transitions. allows designers to create content that enable users to zoom around the canvas or page layouts. It is this simple feature of zooming userDespite its success in interaction design, the “Alice for iPad” ebook interfaces (ZUI) that has attributed to Prezi’s success. ZUIs allowexhibited no creative page transitions. At the bottom of each page are presenters to better visualize their ideas; they can be navigated with theclear “left” and “right” arrows. It is contradictory for an interaction click of a mouse or exported to the iPad and navigated by touch.designer to spend so much time on the interface and interactivity of alayout design, only to totally disregard interactivity of the page layouts. However, neither software/editor allows for automatic, non-user initiatedIt is understandable that early web designers focused on layouts zooming and panning. In my prototypes, I explore automatic, non-userinstead of transitions, due to slow page-loads and connection speeds; initiated zooming and panning effects, as they attribute an element ofand it is understandable that digital publishers focus on layouts instead surprise. For instance, one magazine prototype begins completelyof transitions, if they are limited by transition presets in today’s zoomed in on a photograph so that the image is unrecognizable; then,interaction and digital publishing programs. However, the designer of slowly, the animation pans in and around in this picture, ﬁnally to zoom“Alice for iPad”, designed and developed the magazine application him- out and revel the image as a whole.self and therefore had limitless possibilities for exhibiting bothinteractive page layouts and transitions.In my interactive spreads for the Masterstudio Thesis 5 Catalogue, ahigh priority is placed on animated page transitions. Whether these are 38
ground or wall. The contents of any editorial page can be spreadKinetic Typography across this space and connected in fascinating ways. With this same framework of thinking, designers can consider limitless 3D spaces to beWhile the most intuitive way to read text is in blocks that span across like the universe we live in; 3-dimensional bodies of content can bemultiple columns and pages, there are several ways to make this more arranged and displayed from multiple angles. This researchengaging. One way is through kinetic typography. Kinetic typography demonstrates several instances of 2D places and 3D spaces that causeis most prevalent in cinematic features and television advertisements; preconceived notions of the “page” to disappear”.but it should also be considered for use in digital editorials. If used toooften or too wildly, however, it can overwhelm the reader and jeopardize the user experience. But if done just right, it can offer a unique andengaging way to read through text. Interaction and digital publishingprograms offer a number of animated text presets, and these can beused in combination to create very basic examples of kinetictypography, just not so impressively.In my digital editorial, I incorporate motion typography animations inAdobe After Effects, and place them into the editorial layouts. Theeffects are overwhelmingly better than effects attempted in AppleKeynote, Adobe InDesign, or iBooks Author. In Adobe After Effects, Ican customize and greatly lengthen instances of motion typography; Ican also create a sense of 3D.Thinking of Page as 2D Plane/3D SpaceBefore designing an editorial page as a 2D place or 3D space, it mustﬁrst be considered as one. Many designers approach the digitalinterface of a magazine, and conceptualize each space a page. Thisonly makes it more difﬁcult to separate notions of the print mental modelfrom the digital space; they are no longer one and the same. Designersmust consider a page, as an inﬁnite 2D place, such as an endless ﬂat 39
By using animation and interaction programs such as Adobe AfterEffects and Apple Keynote and digital publishing platforms such as Adobe Flash CatalystIndesign 5/ 5.5 and iBooks Author in combination with one another, I Flash Catalyst offers the most possibilities for achieving creative interac-was able to demonstrate new and innovative interactive-layout possibili- tivity; however, it is not possible to export a prototype a mobile digitalties. Each program offered a range of interactive and animation device, only a web browser. Nonetheless, because it offers the mostpossibilities which could enhance the digital “reading experience.” useful tools and it is possible for developers to program as an applica-After thorough experimentation and research of program that are tion (.air) with Adobe Flex (now Adobe Flash Builder), it is important tocurrently available, I determined which program/s offered the best consider. After all, designers cannot assume digital tablets will be thepotential for engaging interactivity. primary/popular mode method of reading in the near or far future.Adobe Fireworks Some of the possibilities of Flash Catalyst include the grouping images and the ability to animate them together. It allows designers to placeAdobe Fireworks is used for information and interaction design and more than one animation on an object or page, so that it can play out ascreating interactive prototypes quickly. Designers can create simple an animated short instead of simply a short-lived interactive component.“clickthroughs” that allow users to move among the pages and exhibit The program also allows freedom with transitions by providing design-complex behaviors such as swapping, rollover, and embedded content ers with one the most sophisticated timelines in any interaction-basedsuch as slideshows and interactive maps. software.While the logic proves to be less linear and the user can jump between However, Flash Catalyst is not the program of choice for creative interac-pages or “states”, it does not support animated components or tive books or magazines. Designers often use it for rapid prototypinganimated transitions. Some animation is essential to a fully interactive ﬂash-based experiences, such as interactive prototypes for webs orreading experience. And while program does incorporate some simple click-through desktop/mobile applications. If I decided to createcomplex behaviors, there are a very limited number to choose from. my magazine in Flash Catalyst (which is completely possible) I left withTherefore, it was not used for ﬁnal prototyping in this design project. only two options for exporting an interactive prototype: 1) As a .swf ﬁle that can be viewed only in a desktop browser, or 2) As a .air application. There are no available tools for exporting Flash Catalyst interactions to a mobile device. Furthermore, a .air application cannot be prototyped on the desktops like it can in Adobe Fireworks 40
("Commands > Create AIR File > Preview"). This is likely because Fire- The prototyping tool is not as user friendly as prototyping tools in Appleworks does not contain elaborate interactions or animations with time- Keynote and iBooks Author; these programs have established a tracklines. It is simply a click-through prototyping program. record of quick and successful syncs between desktop and mobile con- tent. Adobe Content Viewer cannot always be expected to sync prop- In short, my only option to export interactions in Flash Catalyst erly, and especially when placing interactive and video components.would be to "File > Publish to SWF " or "File > Publish to AIR” If publish- As the Adobe Creative Suite 6 approaches, usability of the Adobe Con-ing to AIR, It would require a highly qualiﬁed developer to "build" my tent Viewer may soon be resolved; however, not in time for the executionFlash Catalyst prototype as a .air application so that it could be viewed of this design research.as a working application (instead of a preferable prototype) on a mobiledevice. Therefore, Flash Catalyst was not used in order to create a ﬁnalworking prototype for this research.Adobe InDesign 5/5.5 & Adobe DigitalPublishing SuiteThe Adobe Digital Publishing Suite provides designers with an intuitiveand affordable way to create, develop, and deliver iPad apps such ashighly visual magazines without writing code and relying on developers.Designers can create one-time digital publications as single applica-tions with no additional fees for unlimited downloads of the single app.Adobe InDesign provides the most animation and interaction presetsthan other current digital publishing and interaction programs such asApple Keynote and iBooks Author. It is currently the the most sophisti-cated digital publishing program and also the industry standard. However, one of the major drawbacks to working with Adobe InDesignand the Digital Publishing Tools the Adobe Content Viewer. The AdobeContent Viewer promises to render content, complete with interactivityand navigation, in .folio format. However, this is not always the case. 41
iBooks Author iBooks Author allows you to create and publish multi-touch books or magazines for iPad. It is possible to incorporate galleries, video, interac- tive diagrams, 3D objects, multi-touch widgets, and more. iBokos Author allows for the placement of .swf ﬁles from After Effects/Flash as .mv4 (iPad viewable video ﬁles). It is by far, the quickest and easiest previewing capability, even more so than Apple Keynote. As long as the iPad is plugged in, the “sync” button is pressed, and the + “iBooks” (not to be confused with “iBooks Author”) application is open on the iPad, the interactive document can be previewed right away. However, there are several imitations with iBooks Author, one of which is being stuck ﬁrmly in the print mental model. iBooks Author comes com- plete with preset print-based templates, all of which are very hard to break apart and restructure. There are absolutely no preset page transi- tions and not even a simple “page curl”; the user can only scroll through the pages. It is very hard to be creative with this major limitation. Unlike in Adobe Flash Catalyst, the user cannot move between "states" or pages in a non-linear fashion. I cannot link an object/page to another object/page of my choice. For instance, in Flash Catalyst, I can make an interactive button; when this button is clicked, it might trigger an anima- tion, such as a "Resize" animation, enlarging that button to ﬁll up the whole screen. I need a program that allows me to have 1) Interactions (Click on/Click Off or Link to URL/Play video) and 2) Animations/Actions (Fade, Move/Reposition, Resize/Zoom In/Out, Rotate, Rotate 3D).An illustration of working progress with Adobe Adobe InDesign 5/5.5,Adobe Digital Publishing Suite, highlighting certain problem areas. Furthermore, while I can place animations/videos from After Effects/ Flash (converted from .swf to .mv4), the rest of my pages will be very 42
static, and someone can ONLY view them in a linear fashion. This is eve-rything I am trying to avoid in my "revolutionary" prototype - Magazineslike "Wired" simply place videos, animations, and touch/pinch-based/scroll based interactivity inside - on a single page/state. It usuallydoesnt links to other objects/pages. This is a problem similarly faced inKeynote. For the purposes of this research, two (Keynote) prototypeswill hold a series of animations, displayed in a linear fashion, in order todemonstrate a forward-way of thinking. They cannot, however, be testedfor usability; there is currently no interaction or digital publishing pro-gram that allows quick and easy animation exports, and touch based-interactivity inside those animations. So until a interaction or digital pub-lishing program emerges with capabilities for editing animation, theseprototypes cannot be intended for user-interactivity.I have decided to iBooks Author for the publication of this research pa-per and allow any series of still-shots to be placed as interactive orvideo content instead. 43
Apple KeynoteThrough my research, I determined that Apple Keynote is currently thebest tool to prototype user interfaces for mobile applications. AppleKeynote is used to create interactive app prototypes quickly andcheaply. It has a reasonable number of graphic tools and lots oftransitions. It allows you choose among 25 transitions, including 3Dtransitions, its famous magic move transition (which allows an object tochange its form or action across consecutive slides), and much more.The path of logic is not too linear, and the user can move around and belinked to different pages and states. Animation can easily be placedinside, in order to demonstrate more advanced interactivity and effects.However, Keynote is by no means a perfect piece of software. In fact,by many standard’s Adobe InDesign is a better tool, which offers evenmore transitions, animations, and motion effects. The only reason thatKeynote is the best tool for prototyping editorial layouts is because of itsusability. InDesign cannot export interactive layouts to the digital tabletas often and as easily. This is a huge concern for designers, who aretrying to test ideas for interactivity every step of the way. While only 1.5versions, feature the Adobe Digital Publishing tools have beenavailable, it is possible this problem will soon be ﬁxed. If so, Keynoteshould be recognized as the second-best tool for prototyping interactivelayouts, since it has less presets and it was not made speciﬁcally forprototyping editorial layouts for mobile devices. 44
DESIGN PROCESS7 The design process begins with UI storyboarding, sketching, wireframing, and creation of mockups of the interface. The design and experimental phase will highlights any technical challenges that might not otherwise have been predicated in this attempt. This process moves design ideas into reality.
Section 1DESIGN PROCESS The design process begins with UI storyboarding, sketching, wireframing, and creation of mockups of the interface. The design and experimental phase will highlights any technical challenges that might not otherwise have been predicated in this attempt. This process moves design ideas into reality. A working knowledge of several design disciplines is necessary, spanning interaction, interface, user experience, visual and information design; all of these disciplines are interrelated. The end goal is to create high-ﬁdelity prototypes that can be made ready for usability evaluations by usability experts. These prototypes must ultimately be made deliverable to a development team. Once the prototype has been tested for optimal usability, the development team may translate the prototype to a working system or application. Visual Design (UX/Visual Design) In order to maintain the visual style of the Masterstudio print catalogue, I can must only slightly alter graphical components, not change them. The only additions are to the graphical user interface (GUI), such as buttons, sidebars, or any other visual components that allow users to interact with the electronic. In adjusting or reorienting existing visual content, I must always consider the user experience. How must visual components be displayed on the device? Is the visual information effectively communicating? How can I best adapt visual designs to the digital medium and maintain functionality? In doing so, a designer must adhere to fundamental principles for designing or adapting visual material for/in order to maintain a successful/ the user experience. 46
User Interface Design (UI)This research closely analyzes print mental models and considers theirtranslation to mobile device interfaces; it proposes that digital interfacesbe reconstructed to organize editorial layout so they do not closelyresemble print mental models. In order do so, common heuristics foruser interface were followed closely to ensure a ﬁnal working prototypethat can be exhibited with optimal usability. One example candemonstrate this working method: 48
Interaction Design (IxD)Final interaction design work was exhibited in Apple Keynote. As dem-onstrated through design methods, Apple Keynote proved to be themost reliable and user-friendly interaction design and prototypingsoftware.By making “scenes” and not pages, this alters the user’s perspective. Itoffers a more interesting an engaging viewing experience, if designedin the right way. If a designer makes the digital “scene” too interactive,too confusing, this idea could backﬁre. This is what separates a userexperience/visual designer from an interaction designer. An interactiondesigner must determine how visual components can interact in anintuitive, user-friendly way. 50
Motion Graphics DesignThe motion graphic designs in this research are animation-based,experimenting with both 2D and 3D techniques. They exhibit 2Dtechniques, which aim to enhance the interactivity of interface andproject a future idea of what the world of publishing has left to offer.These motion graphic designs are placed in two Keynote prototypes willhold a series of animations, and used to demonstrate a forward-way ofthinking; this is unlike the strictly-based Keynote prototypes, which canultimately be tested for usability. The strictly-based Keynote prototypeswere created on a program that was intended for export and user inter-action. The remaining Keynote prototypes with After Effects animationscannot ultimately be tested for usability; this is until a interaction or digi-tal publishing program emerges with capabilities for editing animation. 51
The prototypes also exhibit 3D techniques by creating the illusion ofdepth; depth perception gives a new sense of perspective to theinteractive interface, one of the ideals I strive to maintain inappropriating editorial layouts for mobile device interfaces. Flatdesigns, exhibited through drawings, photographs, ﬁlms, and paintingsare limited in the sense that they pretend to contain true depth’ they areactually ﬂat illusions of depth. The essential point of creating 3D art isto create a believable world; embedding a believable world into a digitalpage interface will alter user perspectives entirely. The world may becompletely false, but there must be certain visual cues, that allow usersto buy into the reality to some degree. 3D animation takes a real worldstage and recreates it within a ﬂat space (Byrne). 52
CONCLUSIONS8 Keynote is currently the best tool to prototype editorial layout designs for mobile applications; this is until Adobe InDesign 5 & 5.5 improves the usability of their Adobe Content Viewer. A real modern piece of software would allow designers to utilize animation, interaction, and digital publishing possibilities all on one platform.
Section 1CONCLUSIONS Keynote is currently the best tool to prototype editorial layout designs for mobile applications; this is until Adobe InDesign 5 & 5.5 improves the usability for exporting tests of interactive layouts with their Adobe Content Viewer. Then it will be easy to say that Adobe InDesign 5/ 5.5, in combination with the digital publishing tools, is the best tool to prototype editorial layout designs for mobile applications. However, the future is changing rapidly and other interactive and digital publishing programs might make more useful iterations to their software. One of the most important iterations a program can make at this time is the incorporation (or close collaboration) of animation software. One such animation software, Adobe After Effects, allows for custom and high-end animation work; however, animation work must ultimately be rendered and twice converted before placing into programs such as Keynote, InDesign, or iBooks Author. In fact, sometimes the programs do not accept the same animation ﬁle formats, and this creates twice as much work for the designer. Imagine we were able to take the best features of existing interaction, animation, and digital publishing programs, starting with Adobe After Effects. This would be a real modern piece of software, allowing designers to utilize animation, interaction, and digital publishing possibilities all on one platform. No longer would designers be limited to preset animations, transitions, and other interactive effects. They would no longer have to resort to an amateur timeline, such as in Adobe Flash Catalyst, to make custom animations; instead, they could add boundless complexity. Finally, there would ﬁnally be software that can facilitates the design of modern, interactive user interfaces for the future of digital publishing. 55
SOURCES9 A list of sources that were used in sufﬁcient detail during this research investigation.
Section 1SOURCES Byrne, Bill. 3D Motion Graphics for 2D Artists: Conquering the Third Di- mension. Oxford: Elsevier Inc, 2012. Print. Curran, Steve. Motion Graphics: Graphic Design for Broadcast and Film. Rockport Publishers, Inc, 2000. Print. Kolko, Jon, and Chris Connors. Thoughts on Interaction Design. Morgan Kaufmann, 2009. eBook. <http://books.google.ch/books?hl=en&lr=&id=gu5FfptR0_MC&oi=fnd& pg=PP2&dq=what is interaction design&ots=LA4S1B51Ge&sig=GSaw4gMaSRhMxZsjD-iI6u45hiA>. Kolko, Jon. Thoughts on Interaction Design: Second Edition. Morgan Kaufmann, 2011. eBook. <http://www.amazon.com/Thoughts-Interaction-Design-Second-Edition/ dp/0123809304/ref=dp_ob_title_bk>. Smashing Magazine, . Mobile Design for iPhone and iPad. Freiburg: Smashing Media GmbH, 2010. Print. Stevens, Chris. Designing for the Ipad: Building Applications That Sell. Chichester: John Wiley & Sons Ltd., 2011. Print. Thompson, John B. Books in the Digital Age: The Transformation of Aca- demic and Higher Education Publishing in Britain and the United States. Polity Press, 2005. Print. Tullis, Tom, and Bill Albert. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics. Elsevier Science Ltd, 2008. 57
eBook.<http://books.google.ch/books?hl=en&lr=&id=KsjpuMJ6T-YC&oi=fnd&pg=PP1&dq=user experiencestrategy&ots=Npzx_MJyJ3&sig=LCsSTimHS-BIWzG68IBs-vpCCsI>.Walsh, Mike. "The Future of Publishing." Mike Walsh, The Futurist. Tomor-row Limited, 15 Jul 2010. Web. 15 Jun 2012.<http://www.mike-walsh.com/blog/bid/50397/The-Future-of-Publishing>.Wilber, Rick. Future Media. San Francisco: Tachyon Publications, 2011.Print.Vanhemert, Kyle. "The Best iPad Apps." Gizmodo iPad. Gizmodo, 31Jan 2011. Web. 14 Jun 2012.<http://gizmodo.com/5747915/the-best-ipad-apps>. 58
ABOUT THESTUDENT10 Christine Callahan focused in digital media studies at the University of California, Santa Barbara, where she also delivered workshops in the Adobe Creative Suite and basic web programming to students on campus.
Section 1ABOUT THE Christine Callahan, M.A. Christine Callahan focused in digital media studies at the University ofSTUDENT California, Santa Barbara, where she also delivered workshops in the Adobe Creative Suite and basic web programming to students on cam- pus. She currently works as a freelance designer for web and mobile ap- plications and is preparing for a career in user interface and interaction design. 60