5. Interactive Experience
Wednesday, May 25, 2011
most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital
experiences
6. Planning &
Building
Wednesday, May 25, 2011
most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital
experiences
7. OVERVIEW
•SOFTWARE AS CONCEPT
•PLANNING: (Documents, Resources, Tools & Services)
•PRODUCING: Chinese Menu Development Approach
Wednesday, May 25, 2011
Thereʼs a lot that goes into producing an interactive experience
8. SOFTWARE
•Aninteractive system that supports a User
Experience
Wednesday, May 25, 2011
• Designed around the user, it is the foundation for all electronic devices that use software
• The User controls for software through an interface
So the interface is designed to enable and respond to user input into the system and helps shape the order and form of the content the system delivers
9. SOFTWARE (basic system)
http://media.photobucket.com/image/recent/emando/patek-philippe-super-complication.jpg
Wednesday, May 25, 2011
• this why there is such a stringent process and why it’s communicated every time as define, design, etc.
10. SOFTWARE (basic system)
•Front End Interface
•Back End Code
•WWW Server Specifications
•Data
•Assets
Wednesday, May 25, 2011
• Designed around the user, it is the foundation for all electronic devices that use software
• The User controls for software through an interface
So the interface is designed to enable and respond to user input into the system and helps shape the order and form of the content the system delivers
12. Planning Arsenal
Documents,
People/ Solutions
Tools &
Resources
Services
The Team
Wednesday, May 25, 2011
Thereʼs nothing left to chance in a website. A button does what itʼs supposed to do, nothing more, nothing less. If the control isnʼt planned for up front, it canʼt be added, without
consequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
13. Planning Arsenal
Documents,
People/ Solutions
Tools &
Resources
Services
The Output
Wednesday, May 25, 2011
Thereʼs nothing left to chance in a website. A button does what itʼs supposed to do, nothing more, nothing less. If the control isnʼt planned for up front, it canʼt be added, without
consequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
14. Planning Arsenal
Documents,
People/ Solutions
Tools &
Resources
Services
The Deliverable
Wednesday, May 25, 2011
Thereʼs nothing left to chance in a website. A button does what itʼs supposed to do, nothing more, nothing less. If the control isnʼt planned for up front, it canʼt be added, without
consequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
15. Planning Arsenal
Documents,
People/ Solutions
Tools &
Resources
Services
The Production Matrix
Wednesday, May 25, 2011
Thereʼs nothing left to chance in a website. A button does what itʼs supposed to do, nothing more, nothing less. If the control isnʼt planned for up front, it canʼt be added, without
consequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
16. Planning Arsenal
http://www.wordle.net/
Wednesday, May 25, 2011
There are a myriad of terms to get your head around and understand. here are just a few.
generated from wordle.com
17. Solutions
•Digital Systems/Platforms
Resources
•Microsites/Flash
•Microsites/NOFLASH
•Tablet apps
•OS widgets/apps •Mobile apps
•Digital Installations
•Banners/Rich
•Banners/Stnd
Scope [time & cost]
Wednesday, May 25, 2011
Seems obvious, but this gives you an idea of the increasing complexity of projects as scope increases. x-axis=Scope[Time & Cost], y-axis=Resources
18. Feasibility Philosophy
•Reverse engineer
•Existing similar examples
•Technology requirements audit
•Collaborate with experts
Wednesday, May 25, 2011
19. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - At any given time, this is the core group of resources needed to develop the kinds of applications and platforms out there
today.
20. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a banner campaign, standard and rich.
21. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a mobile application
22. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a Flash Microsite
23. Documents
Project Plan
Functional & Technical
Requirements/Specifications
Site Map &
Wire Frames
Design Comps, Copy
Deck, Style Guide
Quality Assurance Plan
Hosting
Specification
Wednesday, May 25, 2011
Interactive Documentation Timing Matrix
26. Project Plan
http://konradkubiec.com/wp-content/uploads/merlin.jpg
Wednesday, May 25, 2011
An interactive timeline needs to be more granular, and so the square calendar format is too limiting for all of the simultaneous and cascating tasks, milestones, and deliverables. The linear
cascading graphic here is called a Gantt Chart. This is a Merlin screenshot - Merlin is a low cost Mac based scheduling and Gantt software thatʼs basically a mac version of Microsoft Project.
27. Functional Reqs
•How a particular experience functions, what a
system is supposed to accomplish
•A typical functional requirement will contain a
unique name and number, a brief summary, and a
rationale. This information is used to help the reader
understand why the requirement is needed, and to
track the requirement through the development of
the system.
•EG:
Video Player: FF, RW, PAUSE, PLAY, REPLAY,
SCRUB, FULL SCREEN, FEATURE LINK
Wednesday, May 25, 2011
28. Technical Requirements
•How a particular system functions, how a system is
supposed to accomplish the functional requirements
•A typical Technical requirement will contain a unique
name and number, and a description of the technical
criteria for a particular funciton
•EG: The dimensions of the site are a minimum of
1024x768, but should elegantly accommodate for
larger browser windows up to 1440x900.
Wednesday, May 25, 2011
29. Functional & Technical
Specifications
•How a particular experience functions, what a system is supposed to
accomplish
•a specification is a document that clearly and accurately describes the
essential technical requirements for items, materials, or services including the
procedures by which it can be determined that the requirements have been
met. Specifications help avoid duplication and inconsistencies, allow for
accurate estimates of necessary work and resources, act as a negotiation and
reference document for engineering changes, provide documentation of
configuration, and allow for consistent communication among those
responsible for the eight primary functions of Systems Engineering. They
provide a precise idea of the problem to be solved so that they can efficiently
design the system and estimate the cost of design alternatives. They provide
guidance to testers for verification (qualification) of each technical requirement.
Wednesday, May 25, 2011
30. Site Map
http://www.sqa.org.uk/e-learning/IMPlanning02CD/images/pic006.jpg
Wednesday, May 25, 2011
31. Flow Chart
http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/LampFlowchart.svg/220px-LampFlowchart.svg.png
Wednesday, May 25, 2011
Interactive means choice, choice necessitates interface. As you embed if/thenʼs inside eachother, they compound geometrically, so as choice increases, so do the level of interface
sophistication, ultimately becoming dynamic - following a process with the proper tools, documents, and team form an instruction set for site programmers.
32. Flow Chart
http://en.wikipedia.org/wiki/File:Flowchart_Showing_Driving_to_a_Goal.jpg
Wednesday, May 25, 2011
33. WireFrames
http://johnlevenson.com/wp/wp-content/uploads/yapb_cache/wireframe_crop.747qc6vtsiskg0gsgsos4cc0s.594zrl0ettogcw0wkgwccgk80.th.jpeg
Wednesday, May 25, 2011
34. WireFrames
http://www.beccaescoto.com/lauren/Project%201/images/wireframe2.gif
Wednesday, May 25, 2011
39. Quality Assurance Plan
•Mirrors Functional and Technical Specs
•Uses wireframes as a guide
•Is cyclical and tedius
http://us.123rf.com/400wm/400/400/ika747/ika7471103/ika747110300002/9201421-arrows-circle-sign.jpg
Wednesday, May 25, 2011
40. Hosting Specification
•Defines where and how the site will be hosted
•Comply with Client digital governance
•Feasibility of project depends on hosting restrictions
•Ownership of Domain Names and Name Servers
Wednesday, May 25, 2011
52. BugTrackingFlow
http://developer.mindtouch.com/@api/deki/files/6780/=YouTrackFlowChart.png
Wednesday, May 25, 2011
53. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a Tablet Application - This is almost identical to Mobile
applications, since, technically, Tablets are considered mobile devices.
54. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a NON - Flash Microsite
55. Interactive Production Matrix
Wednesday, May 25, 2011
Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a Flash Based facebook application
56. Take Away Pointers
•Invention: No solution is the same, but there are
lots of similarities.
•Reverse engineer similar whenever possible
•these tools are a conduit to making an experience
•It’s OK if it’s never been done, it’s NOT OK if it can’t
be
•You don’t have to be able to write this stuff, you just
have to know what they are and how they’re used.
Wednesday, May 25, 2011
57. Reference Terms
For a nice definition of almost all the terms included in this course, please reference this Glossary from Hackshackers.com:
http://hackshackers.com/resources/hackshackers-survival-glossary/
Tools - Referenced in the deck, the following are links to the applications that make documents and/or software easier to write:
MS Project - Scheduling and resourcing software - PC only
- http://www.microsoft.com/project/en/us/try.aspx?cmpid=RXGOOGUSBSR&gclid=CMXAxaDC_qgCFRDPKgodc344Sg
Merlin - Scheduling and resourcing software
- http://www.projectwizards.net/en/merlin/
Visio (sophisticated site mapping tool - also good for flowcharts and wireframes)
- http://office.microsoft.com/en-us/visio/
Omnigraffle (Simple SiteMap FlowChart)
- http://www.omnigroup.com/products/omnigraffle/
Axure (Advanced Wire Framing, prototyping, etc.)
- http://www.axure.com/?gclid=CJ_d2OHC_qgCFQHsKgod6whbTQ
Adobe Dreamweaver (Graphical HTML editor)
Adobe Fireworks (prototyping sites)
Coda - an HTML editor
http://www.panic.com/coda/
Expression Studio - for developing HTML5 and Silverlight solutions
- http://www.microsoft.com/expression/
Con’t on next slide
Wednesday, May 25, 2011
58. Reference Links
Services - Referenced in the deck under Tools and Services, these are mostly web-based services that are used to manage various
stages of an Interactive Production
HOSTING
Hosting a web server:
- Rackspace.com, Mediatemple.com, Dreamhost.com
Checking Availability of Domain Names:
- www.checkdomain.com
If Domain Name unavailable, whois checks on public records who owns it
- whois.net
Buying domain names:
- Godaddy.com, Register.com, Networksolutions.com
Content delivery networks - when you need scale for streaming video, etc.
- Akamai.com, http://www.limelightnetworks.com/
Extranet - online document tracking and project management
- http://basecamphq.com/
Getting assets and documents back and forth
- dropbox.com
Tracking bugs - VERY IMPORTANT
- Jira - http://www.atlassian.com/software/jira/
- Bugzilla - http://www.bugzilla.org/
Wednesday, May 25, 2011
