Remember the User: Storing and Sharing User Information in a User-Centered Design Organization


Published on

The "Remember the User" project was my final internship for the User-System Interaction (USI) program at the Eindhoven University of Technology (TU/e). For it, I designed and evaluated an browser-based application for storing and sharing user information for the design department at Océ. The project took nine months, and here is the presentation I gave at the end.

Published in: Design, Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The idea: a shared vision of reality (users) for Océ user advocates.
  • The project is intended to support three activities:Storing user informationSharing that user informationRecruiting user test participants
  • Idea: Intranet-based, browser accessible information system.Why? Access: From anywhere inside R&D From any computer Rich media capability (videos, photos, etc.) Wikis also follow these criteria, but more on that later
  • Next big questions:What form will the information take?What can system users do with it?Basic unit of information, like a single database entry, each with its own attributes (variables)
  • ACTIONS:Based on typical CMS paradigm, except for timeline view (context requirement)
  • Four entry points to accommodate different retrieval methods:Browse for exploration,Search bar for directed search,Latest activity and tag cloud for reactionary retrieval
  • Lightweight keyword search; keywords can be added and deleted at will to display different results
  • Each node has a detail view that shows all the information in one node on one screen.Detail view consists of an image and title to basic information to details and rich media to socially connections to other resourcesThis persona, for example, has three images attached in this slideshow.
  • Timeline view was intended to put nodes into context, where one can see what has gone on in the time leading up to a node’s creation.
  • The idea was to make the system in Drupal, because the CMS’ extensibility and security lends itself to this kind of exchange system. As such, I built a crude prototype in Drupal with the information architecture and experimented with some of the Drupal modules available.
  • Same entry pointsOcé corporate styleNow with global navigation on sidebarSearch is on left to accommodate mental model and center stage design pattern
  • Some background information on these questions:The portal features three main entry points to the content: “Browse” by node type, “Search” as a search box, and the tag cloud. I wanted to see which of these people used the most and why.Drupal has the exciting feature of easily exporting its content to PDF or into XML format. I wanted to leverage this in such a way that people could use the export function to export nodes and such as plain text for easy copy/pasting into reportsAs it is now, Océ R&D uses wikis to upload and share user information. I wanted to highlight one of the advantages of this system by showing that Odea’s Web2.0-style upload form is much easier to use than a wiki upload form. Also, I incorporated some new behavioral and layout elements into this iteration of the design; were they good ideas?
  • More info on what came out of the think-aloud study:People found the “Browse” section to be inviting, and that was the natural entry point for most participants.The export function was received well, but the participants would have liked it to be better integrated into their existing reporting systems.Participants definitely found the upload form to be better than that of a wiki.In general, the layout and behavior was received well, but participants felt that each page was too cluttered, there was no apparent hierarchy in the content types, and it would be useful to be able to retrace your own steps while using Odea.
  • I experimented with different variations on displaying search results. Designers, who tend to be visual thinkers, preferred the graphical display, but with the caveat that it must be made more useful and usable by incorporating more information into the display. I presented the three variations printed in color on paper at the same time and asked participants which they preferred and why. One of the participants, a programmer, immediately pushed away the graphical display sheet and exclaimed, “not this one!”
  • I experimented here with different ways to make system users feel more like there is a dialogue going on with Odea, in order to engender an affective, emotional response by making Odea seem more like a being than a lifeless system.Some (male) participants preferred the variant featuring the woman’s face, but most felt that the extra page content cluttered the layout and did not feel any emotional response. They would tolerate the extra “clutter” if the information were useful, however.
  • New Start Page:More standard separation between the left menu bar and right content area. Actions taken on the left will manipulate content on the right. This strengthens the center stage design pattern.I incorporated two new things above the content area, on top is a breadcrumb navigation row that shows the last pages visitedThe second is a command button row that displays commands contextually, providing feed-forward to make it clear what the system user can do with what s/he sees in the content area.Content displayed more modularly, to help system users distinguish which things belong together.The icons incorporate color coding to subtly show content hierarchy and distinguish node types in search results.I added a random quote generator to the start page as an affective element. It is less emotional, but useful and appealing to system users.
  • New Node Page:The layout is modified to make more clear what is the node and what is extra content (comments, links to other nodes, etc.)Notice the command buttons on top are different for the node page: these are the commands available for the node context
  • New Node Page:3. The extra information is now positioned in such a way that it accommodates infinite numbers of entries by allowing scrolling. This lets the layout breathe by allowing extra vertical space for positioning bits of content while making the visual hierarchy statement “this content is less important than the node content.”
  • New Search Results:The left menu bar is now dedicated to a flexible search mechanism that allows system users to input keyword filters and delete them in a lightweight and non-intimidating way.Node entries themselves are grouped into their categories with icons depicting which node type they are at a glance. Less text is shown per entry, only search-relevant informationNode entries are also made more visual through giving each one its own box. The gradient background invites clicking, supporting the affordance that clicking anywhere within the box takes the system user to the relevant node page.The contextual commands here support text participants’ mental models that the search results are actually a “node center” where they can perform all node-level actions. This was not supported in the previous iteration.
  • Note: DocFinder is the automated report generator used by Océ.
  • Here is a cost/benefit diagram showing how Odea could affect the organization during its development and adoption cycle.1. During the development phase, it costs resources for making the first steps. There is little benefit, as Odea cannot yet be used.2. Once the framework of Odea is in place, the user information gathered before Odea must be input into the system. This is relatively thankless work until it is completed. 3. Once all the information is in Odea, it finally becomes useful. The only effort required to maintain the system is each individual’s effort in adding new content. This is frequent, non-intensive work, and the burden of maintaining the content is spread across all who use it.4. If changes need to be made, implementing them will cost more time and resources, but once that is finished, the overall benefit increases and overall cost will either go back to “normal” or decrease, depending on the changes made.
  • Iterations…..
  • Peace of mind; concentrate on design
  • Remember the User: Storing and Sharing User Information in a User-Centered Design Organization

    1. 1. Remember the User<br />Brian Pagán<br />Eddy van Vliembergen<br />AbbieVanhoutte<br />Jacques Terken<br />
    2. 2. Shared vision<br />
    3. 3. Store<br />Recruit<br />Design<br />Research<br />Evaluate<br />Build<br />Share<br />
    4. 4. Design<br />Research<br />Evaluate<br />Build<br />
    5. 5. 40 Semi-Structured Interviews<br />User Information:<br />What? 71 Types of information<br />How? 4Models of exchange<br />&<br />3. 52 spontaneous statements by interviewees<br />Design<br />Research<br />Evaluate<br />Build<br />
    6. 6. Current Information Exchange Models<br />Design<br />Research<br />Evaluate<br />Build<br />
    7. 7. Design<br />Research<br />Evaluate<br />Build<br />
    8. 8. Design<br />Research<br />Evaluate<br />Build<br />
    9. 9. First Ideas<br />Design<br />Research<br />Evaluate<br />Build<br />
    10. 10. Many-to-Many, Dynamic<br /><ul><li> Odea and wikis
    11. 11. Information control at recipient
    12. 12. Digital = searchable
    13. 13. Dynamic information
    14. 14. Two-way information flow</li></ul>Océ Odea<br />Design<br />Research<br />Evaluate<br />Build<br />New information exchange model<br />
    15. 15. Odea Info Architecture<br />Design<br />Research<br />Evaluate<br />Build<br />
    16. 16. Odea Flow<br />Timeline View<br />Search Results<br />Search<br />Open Node<br />Design<br />Upload Form<br />Research<br />Evaluate<br />Node Page<br />External Resource<br />Start Page<br />Submit<br />Create<br />Build<br />Open Node<br />Link<br />Browse<br />Node Directory<br />
    17. 17. Start Page<br />Design<br />Research<br />Evaluate<br />Build<br />
    18. 18. Search Results<br />Design<br />Research<br />Evaluate<br />Build<br />
    19. 19. Node Page<br />Design<br />Research<br />Evaluate<br />Build<br />
    20. 20. Timeline View<br />Design<br />Research<br />Evaluate<br />Build<br />
    21. 21. Design<br />Research<br />Evaluate<br />Build<br />
    22. 22. Expert Review<br />Use Case Run-Through<br />= 6<br />Design<br />Research Questions:<br />General Impression<br />Perceived utility<br />Graphical node display for search results?<br />Research<br />Evaluate<br />Build<br />
    23. 23. Expert Review<br />Use Case Run-Through<br />Design<br />Research Questions:<br />General Impression<br />Perceived utility<br />Graphical node display?<br />But:<br />Who’s going to fill it?<br />Only useful with proper adoption<br />Timeline view not useful<br />Answers<br />Clear, but no nav<br />Potentially<br />Not bad<br />Research<br />Evaluate<br />Build<br />
    24. 24. Design<br />Research<br />Evaluate<br />Build<br />
    25. 25. Drupal<br />
    26. 26. Start Page – Next Design<br />Design<br />Research<br />Evaluate<br />Build<br />
    27. 27. Design<br />Research<br />Evaluate<br />Build<br />
    28. 28. User Test<br />Think-Aloud Trials & Debriefing<br />= 9<br />Design<br />Research Questions:<br />Portal entry points?<br />Export useful?<br />Upload form?<br />Layout & behavior?<br />Research<br />Evaluate<br />Build<br />
    29. 29. User Test<br />Think-Aloud Trials & Debriefing<br />Design<br />Research Questions:<br />Portal entry points?<br />Export useful?<br />Upload form?<br />Layout & behavior?<br />Answers<br />“Browse” inviting<br />Yes; better integration<br />Better than a wiki<br />Zen, hierarchy, history<br />Research<br />Evaluate<br />Build<br />
    30. 30. Video Snapshots (Morae)<br />Design<br />Research<br />Evaluate<br />Build<br />
    31. 31. Search Results - Variations<br />1. Single-Column Textual<br />Design<br />2. Tri-Column Textual<br />Research<br />Evaluate<br />Build<br />3. Graphical Tag Web<br />
    32. 32. Start Page – Affective Variants<br />1. No affective elements<br />Design<br />2. Textual question<br />Research<br />Evaluate<br />Build<br />3. Textual question with face<br />
    33. 33. Design<br />Research<br />Evaluate<br />Build<br />
    34. 34.
    35. 35.
    36. 36.
    37. 37.
    38. 38. Design<br />Next Questions:<br />Which exact variables per node?<br />Results view good?<br />Contextual action buttons good?<br />DocFinder Integration?<br />Research<br />Evaluate<br />Build<br />
    39. 39. Further steps:<br />Design<br />Development<br />Adoption<br />Design<br />Research<br />Evaluate<br />Build<br />Benefit<br />Cost<br />Dev<br />Filling in<br />First Use Cycle<br />After Possible Changes<br />