Employing Remediation As a Tool in UX/UI Design the Indie Videogame Model
Total Page:16
File Type:pdf, Size:1020Kb
EMPLOYING REMEDIATION AS A TOOL IN UX/UI DESIGN The Indie Videogame Model Tim Broadwater | GRDS 723 | Project B, Part 2 Table of Contents 1. Cover 2. Table of Contents 3. Introduction to the Problem 4. History 5. Concept Map 6. Communication Strategy 7. Research 8. Design Strategy 9. Mood Experience 10. Idea Sketches 11. Iconography Ideation 12-13. Design Comps 14. Design Comp Feedback 15-16. Final Design in Context 17. Website Introduction to the Problem User experience and user interface design, or UX and UI for short, may be difficult for some designers with experience only in static design (print advertising, magazine layout, and pagination design); however, by examining other fields that successfully employ UX/UI design, such as system and videogame design, designers can identify the following successful principles of UX/UI design: • The user should not have to stop and think about how to do something. • The interaction between the user and the medium should be natural and intuitive. • The user/interface operations must be consistent throughout all areas of the UX/UI. REMEDIATION IS THE PROCESS THROUGH WHICH THE CHARACTERISTICS AND APPROACHES OF COMPETING MEDIA ARE IMITATED, ALTERED, AND CRITIQUED IN a new medium… (or) the REPRESENTATION OF ONE MEDIUM IN ANOTHER - Meredith Davis History The field of UX/UI design has been around since the late 1940s C.E. in regards to human factors and ergonomics, which focuses on the interaction between human users, machines, and environments. There are many key factors to understanding UI and how it can enable a favorable UX, but most are centered on principles such as defining interaction patterns, incorporating user needs, featuring information that is important to the user, and making the interface intuitive by building behaviors like drag-and- drop, selections, mouse-over actions, buttons, and so on. Although many techniques can be employed to provide a positive UX, most of these principles primarily focus on the UI utilizing remediation to foster user accessibility, interaction, and familiarity. concept map Communication Strategy COMMUNICATION GOALS To develop a easily accessible, interactive tool, and informative toolbox that illustrates the capabilities of remediation to help achieve the following three principles in UX/UI design: • The user should not have to stop and think about how to do something. • The interaction between the user and the medium should be natural and intuitive. • The user/interface operations must be consistent throughout all areas of the UX/UI. TARGET AUDIENCE AND GEOGRAPHIC SCOPE The target audience for this design project is new media and website designers, that are both male and female, ages 22 to 40 years of age, United states of America citizens or foreign nationals, and that are employed in the areas of user experience (UX) and user interface (UI) design. Research Bolter, David J. and Grusin, Richard. Remediation: Kendrick, James. “3 rules for a good user experience Understanding New Media. Cambridge: MIT Press, 1999. (UX).” ZDNet Mobile News. 9, Jul. 2013. (http:// Print. www.zdnet.com/3-rules-for-a-good-user-experience- ux-7000017818/) Davis, Meredith. Graphic Design in Context: Graphic Design Theory. New York: Thames & Hudson, 2012. Levinson, Paul. The Soft Edge: A Natural History Print. and Future of the Information Revolution. New York: Routledge, 1997. Print. Fahey, Mike. “This Fully-Playable 16-Bit Wonderland is Guild Wars 2‘s Idea of a Joke.” Kotaku, 31 Mar. 2013. Web. 30 Jul. 2013. (http://kotaku.com/this-fully-playable- VIDEOGAME LIST 16-bit-wonderland-is-guild-wars-2s-464761894) Electronic Arts Crysis 3 Human Factors and Ergonomics Society. “About HFES.” Space Invaders HFES, 10 Aug. 2013. Web. 10 Aug. 2013. (https://www. AksysGames BIT.TRIP BEAT hfes.org/) Renegade Kid Mutant Mudds Capcom Mega Man IGN. “PS4 vs. Xbox One vs. Wii U Comparison Chart.” Mystery House IGN Wiki. International Gaming Network, 30 Jul. 2013. King’s Quest 5: Absence Makes the Heart Go Yonder Web. 30 Jul. 2013. (http://www.ign.com/wikis/xbox-one/ Telltale Games Tales of Monkey Island PS4_vs._Xbox_One_vs._Wii_U_Comparison_Chart) Guild Wars 2 The Oregon Trail Indie Game: The Movie. Dir. Lisanne Pajot, James The Organ Trail Swirsky. Perf. Jonathan Blow, Phil Fish, Edmund McMillen, Tommy Refenes. Sundance, 2012. Film. WHAT IS HTML5? HTML5 will be the new standard for HTML. The previous Design Strategy version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is still a work in I will start by organizing all of the information I have found progress. However, the major browsers support many of into a HTML5, CSS3/SASS, RESS toolkit for remediation, the new HTML5 elements and APIs. which will utilize a kind of a ‘indie videogame’ aesthetic to teach successful UX/UI design principles that I have WHAT IS SASS? identified in my research. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s This ‘toolkit’ will be in the form of a dynamic anchored translated to well-formatted, standard CSS using the website, will utilize Google webFonts that reference the command line tool or a web-framework plugin. Sass previously mentioned aesthetic, and will be responsive has two syntaxes. The most commonly used syntax is through structure, javascript, and media queries for all known as “SCSS” (for “Sassy CSS”), and is a superset devices. of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. Mood Experience LOCAL http://pikewoodcreative.com/ http://mindmergedesign.com/ http://travismaynard.com/ http://partleecloudy.com/ INTERNATIONAL/NATIONAL http://happycog.com/ http://webclique.net/ http://heydays.no/ http://bradfrostweb.com/ https://jawbone.com/ http://www.rdio.com/ http://www.webdesignday.com/ Idea sketches Iconography Ideation Design COMPs Design COMPs (Contd.) Design Comp Feedback Final Design in Context Final Design in ContexT (contd.) HTTP://VF20DESIGNS.COM/WEBSITES/ REMEDIATION/ or HTTP://BIT.LY/17990QR.