I’ve been working as an Information Architect for nearly ten years but it wasn’t until recently that I had the opportunity to work on the development of a rich internet application or RIA. While I had made some effort to get an understanding of what an effort like that might involve, like many things, you can’t really get a clear idea what it’s like to do something until you actually do it.
This presentation describes my recent involvement in the development of an enterprise-level rich Internet application. It outlines the things I think are the same, different as well as a few pitfalls to avoid.
2. While not entirely a case study, it’s about the observations I made when I was thrust into the development of a high-profile RIA. Everybody’s talking RIA. So what’s this about?
3. Two people speaking face-to-face Narrative Archive Reproduction Speed Distance Quantity Immediacy A History of Communication (Highly Abridged Version)
4. Archived graphic narrative Narrative Archive Reproduction Speed Distance Quantity Immediacy A History of Communication (Highly Abridged Version)
5. Archived written narrative Narrative Archive Reproduction Speed Distance Quantity Immediacy A History of Communication (Highly Abridged Version)
6. Archived graphic & written narrative Narrative Archive Reproduction Speed Distance Quantity Immediacy A History of Communication (Highly Abridged Version)
7. Narrative Archive Reproduction Speed Distance Quantity Immediacy Reproduction of archived written & graphic narrative A History of Communication (Highly Abridged Version)
8. Narrative Archive Reproduction Speed Distance Quantity Immediacy Faster reproduction of archived written & graphic narrative A History of Communication (Highly Abridged Version)
9. Narrative Archive Reproduction Speed Distance 1-way Quantity Immediacy Reaching across distances A History of Communication (Highly Abridged Version)
10. Narrative Archive Reproduction Speed Distance 1-way Quantity Immediacy Increased sharing and access to larger amounts of information A History of Communication (Highly Abridged Version)
11. Narrative Archive Reproduction Speed Distance 1-way Quantity Personal Real time, mobile, human interaction both intimate and public A History of Communication (Highly Abridged Version)
12. Make Communication Methods… More Relevant: Timely or Informed Available to More People: n -to- n Cover Greater Distances: Space & Time All this in order to replicate as closely as possible… Narrative Archive Reproduction Speed Distance Quantity Immediacy
17. 6 things I think I thought going in… The Hammer problem: “When the only tool you have is a hammer every problem looks like a nail.” I didn’t want limitations on my part to drive the process into my personal safe-zone simply because it’s what I know High-profile: The design team had done an excellent job of marketing the application internally creating intense pressure to deliver based largely on a static presentation Design looks real and finished in the minds of stakeholders Work from predecessor – Specialist in social web and its implications. Not an area that I’d focused on much How is the effort different from HTML design? Lack of familiarity with the implementation needs
18. Urgency: Everybody wants it NOW! -CEO, CMO, Suppliers, Partner Marketing, Customers and the Press Strategic View Limited Prototype: Developed around the particular needs of a single context – Las Vegas, and several issues around scalability had not been addressed – Islands Regions, Destination vs. Activity driven paths Existing IA Effort: Very little in terms of IA work to consume. Predecessor was split between two engagements one of which would become a new business unit under his supervision Maintenance: No CMS or digital asset management systems in place to enable a reliable roll-out or maintenance plan
19. Navigation: Proposed list of initial destinations included different types of paths that had not been distinguished from each other Tactical View Scope: A detailed and long-term feature/user story list had not been qualified Usability: The design that had been so aggressively marketed had not undergone any scrutiny from a usability standpoint Content: Several content areas had not been fleshed out and the need for interaction design prior to committing to code still existed
20. Observed how a new, richer interface did or did not influence entrenched expectations for the outcome of a task. Transference Emphasis on Quantitative vs. Qualitative info Saw (again) the impact of big pictures Collected pragmatic ammunition to battle “giddiness” Usability Testing of Existing Prototype What to do first?: Review the Foundation
21. Qualified features and functions against three criteria Mapped back-log sequencing to user need Feature Analysis Usability Testing of Existing Prototype What to do first?: Review the Foundation
22. What to do first?: Review the Foundation Ratings from 1 to 5 5 being highest
23. What to do first?: Review the Foundation Least Flexibility x3 x2 x1 Most Flexibility
24. What to do first?: Review the Foundation x2 x1 x3 Multiply the values in each column by their weight from the matrix Sort on the weighted scores
25. Agreed with design team on Key-frames as reference points for wireframes (YES wireframes!) Developed additional visual vocabulary to communicate rudimentary transitions without being too prescriptive ID For Content Areas Yet To Be Characterized Feature Analysis Usability Testing of Existing Prototype What to do first?: Review the Foundation
26. Visual Vocabulary Simple notation to take in transitions within static artifacts What to do first?: Review the Foundation
27. Identified Different Context For Navigation Used To See Inventory ID For Content Areas Yet To Be Characterized Feature Analysis Usability Testing of Existing Prototype I want to go to... Las Vegas, New York, The Caribbean I want to… Ski, Surf, Save Money What to do first?: Review the Foundation
28. Hype: Higher “Giddiness” factor that comes from stakeholders’ seeing cool, shiny moving prototype What’s Different? Vocabulary: There is some language that comes with RIA development that is an outgrowth of its visual fluidity. This affects traditional artifacts Rev Cycles: Lead-times between functional and visual design can be longer ID Context: Interaction design often driven at a component vs. a page level Business Logic in the UI: There is more going on in the UI than there used to be vs. the back-end. This informs the efficacy of certain interactions
29. Collaboration: Discipline in validating feasibility of features with technical development What’s The Same? The process: Idea, Plan & Build Planning: The need to do low-risk, functional prototypes devoid of design elements Tactics : The need to assess your surroundings and choose tactics appropriately Balance: IA bringing balance between the System and the UI. However, the desire to forge ahead without planning that used to come from technology is coming from design Vision: Discipline in keeping the big picture in front of individual features
30. Pitfalls To Avoid Revision Cycles: Don’t assume that visual edits are as easy in Flash as in HTML Tone-Setting: Not killing the excitement with pragmatism Interaction Design: Not getting caught up in the interaction at the expense of content or “The Rube Goldberg” * school of interaction for its own sake. * Rube Goldberg (rōōb gōld’berg), n. a comically involved, complicated invention, laboriously contrived to perform a simple operation – Webster’s New World Dictionary