Processes and Productivity User-Centered Design for Intranets Yields All-New Editing UI Ultimately, user-centered design for our new intranet editing interface is about these two questions — one quantitative, and one qualitative 7 minute read You might also like… Whitepaper Intranet Use Cases Whitepaper 10 Award Winning Intranets *Update: Whoaaa, this blog post is really old! Check out some more recent posts here. User-centered design for intranets means — no surprise here — centering the design of your intranet around real intranet users. It means watching them interact with your intranet and making design decisions based on what you see. It’s an approach we’ve long advocated — see our 2005 editorial “Making users a part of your next software project” or our 2009 presentation “User-Centered Design for Mobile“. For me, it’s especially thrilling to see the results it yields. We’ve spent a year-and-a-half practicing user-centered design for our new release, and it’s brought about what I think is the most important new feature in ThoughtFarmer 6: the easiest intranet editing interface ever devised. Selma Zafar (left), Senior UX Designer and Amanda Bremner, UX Designer, working on the editing interface in ThoughtFarmer 6 If you like this blog, you’ll love our newsletter From workbooks and whitepapers, to blog content and best practices, our monthly newsletter is full of great content, advice, and expert insight. History of Easy Page Editing in ThoughtFarmer We did extensive user research and user testing when we designed the very first editing interface in ThoughtFarmer, way back in 2005 (when we called ourselves a “wiki intranet”). We started with paper prototypes and progressed to higher-fidelity prototypes after each round of user testing. Notes from user testing of early editing interfaces in ThoughtFarmer, March 2005 This is what creating a page looked like in ThoughtFarmer v0.9. Ouch. By the time we released ThoughtFarmer, our user-centered approach had produced an editing interface that was easy and intuitive. By today’s standards it looks pretty rough, but remember that this was a few years before YouTube, Twitter and Facebook. (Internet years are kind of like dog years, aren’t they?) Editing a Location page in the initial release of ThoughtFarmer. Before you make fun of my Verdana, remember that this is 2006. Over the next few years we made incremental additions to ThoughtFarmer’s editing interface, gradually expanding its functionality. While each addition on its own seemed too minor to warrant user testing, the cumulative effect of these changes was significant. By 2011 we were unhappy with our editing interface and were determined to do a complete user-centered overhaul. Overhauling Page Editing We started with a list of hunches (“95% of the time you just need the Title and Body. Make them HUGE!!”), pet peeves (“It’s ugly! Too many alignment points!”), but most importantly, some statistics: 94% of pages created by ThoughtFarmer users were of type “default”, even though ThoughtFarmer now had Blogs, Calendars, Forums, Galleries, Groups and Sections. It was apparent that most users did not know that they could create different page types. This problem became our chief focus. Over the next several months, Darren and I tossed conceptual wireframes back and forth, iterating on each others’ work. This initial mockup by Darren was rough but made a clear statement: Make the Title, Body and “Publish” button HUGE. This mockup by me became a little more detailed. We thought putting “Page type” underneath the Publish button would make it obvious. Eventually it shaped into something we thought could work. We passed it off to Selma Zafar, our Senior UX Lead, who would take the concept the rest of the way and prepare it for user testing. The prototype design that Selma’s UX team used for user testing After testing with a variety of novice, intermediate and advanced ThoughtFarmer users, our UX team came back with a thick report. Although we had made progress in some areas, we hadn’t improved the main problem: users still didn’t notice the different page types. Our UX team returned with sobering news: our new designs had done nothing to make it easier to discover ThoughtFarmer’s different page types. We iterated several more times. We strengthened the right column. We relocated the “Publish” button. We added a strong “Page type” dropdown, with visual explanations of the various page types. We added a “Guided Tour”. And our user testing now revealed that we had a winner! This sign is a common sight around the office. If you disobey, you incur the Wrath of Selma ThoughtFarmer 6: the easiest intranet editing interface ever devised The final editing interface in ThoughtFarmer 6 is, like the rest of ThoughtFarmer, deceptively simple in appearance. It starts with a prominent Add and Edit button in the top corner of every page. Editing starts by clicking “Add” or “Edit” On your first edit, ThoughtFarmer presents a concise Guided Tour. New users appreciate the hand-holding. The Guided Tour to editing content in ThoughtFarmer When the editing interface loads, the cursor is already positioned in the large Title box. Start typing to add your title. If you notice that you’ve put your page in the wrong place, you can quickly move it. In ThoughtFarmer 6, you can move a page while you’re creating it. To Publish a page, press the prominent Publish button. If it’s not ready for public consumption, check the “Private” box. Click the big Publish button when you’re ready to make it live. Below the Publish box is the new Page Type selector. This solves our biggest usability challenge: make it easy for users to discover additional page types, without introducing a confusing two-step process. Other intranet systems, such as SharePoint, force you to decide whether your content is a Page, List, Announcement, Blog, Wiki, and so forth, before you can create it. Making that decision intimidates novice users. In ThoughtFarmer, you simply click the friendly “Add” button and start typing. It defaults to a page type that makes sense. If you choose, you can browse the other page types and select a different option. And your choice doesn’t have to be permanent — you can swap to a different page type at any time. Choose from the available page types: a regular page or a Section, Group, News/Blog, Forum, Calendar, Gallery or Link. Change page type at any time. If you choose a page type that has additional options, a panel appears. For example, if you choose “Group”, you can specify Group Type, Address, and Membership Options. For some page types, a panel for additional options appears. We’ve also improved the rich text editor. We’ve rearranged the buttons so the groupings are more natural. And because the text entry area auto-grows, you never get those funny double scrollbars (you know the ones, where different things start scrolling depending on where you put your mouse?). Instead, the entire page, including the text editor, scrolls as a single unit. The text editor auto-grows, so there is no scrollbar. The entire page scrolls smoothly as a unit. Finally, we’ve tucked a myriad of features into the “Settings” box that appears in the right hand margin. These are lesser-used features (including some new ones like Content Expiry, Content Publishing and Content Subscriptions), but easy to access when you need them. Settings are neatly tucked away until you need them. On expansion, a summary of page settings is revealed. Ultimately, user-centered design for our new intranet editing interface is about these two questions — one quantitative, and one qualitative: Does the new editing interface help employees complete the tasks they need to complete? Do the employees enjoy using the new editing interface to complete those tasks? Our UX team can confidently answer “Yes!” to those questions.