To: Greg Wickliff Lit From: Tayler Green Date: 4/06/2016 Subject: Project 2 Assessment 1) Process and Technical Goals for the Project + Linitially wanted to create the report and reference guide in InDesign, since \, “4) based off ofthe last projet realized that aligning and attempting to design ZA, in Microsoft Word is incredibly difficult and frustrating, + Ibegan the project in Microsoft Word, but due toa time constraint and never having used InDesign before, | didn't feel that the report would turn out as polished within InDesign, particularly due to trying to link text and create a table of contents with the correct page numbers. + The main thing I wanted to learn about document design from this project was simplifying the design and layout in a reference guide to the audience of faculty members, who's experience and interests in editing their profiles may vary drastically. god wT Ae 2) Audience Member's Goals for the Project + My audience understood that WordPress had recently been updated, and there were now aspects of using WordPress to edit their profiles which faculty would not be familiar with. + Iworked with faculty within the CLAS to participate in the usability tests. I worked alongside the 4181/5181 Writing User Documents class to discuss potential problems with the interface and participate in peer review, and coordinate Q&A's between Dr. Wickliff and the faculty at Academic ‘Technologies in CLAS. + The main focus of this project was to identify the areas where faculty had difficulties as they edited their profiles through WordPress for the CLAS faculty pages. From this, I produced a tutorial reference guide that met the responses from these usability tests. 3) Key Results of Peer Review and/or User Tests + Iwas able to complete 2 user tests. This met my initial goal of completing 2-3 tests. The user tests revealed that faculty had trouble getting started on WordPress, understanding how to navigate WordPress as they edited, and had an unclear understanding of the functionality of the widgets. + participated in the peer review session during class, and from switching with another group, | received some feedback on areas of my draft that either had errors or lacked completion. + During the time of peer review, I had not completed the reference guide, so I was not able to really receive feedback on the reference/tutorial section, but the other group discussed choosing to put the reference section as a separate document or within the report.4) Your overall assessment of the final document and the Design Process * By using Microsoft Word, the document is evenly spaced, accessible, and consistent. In comparison to the last project, I was able to get the table of contents to be correct, which meant the headers, and page numbers were all linked to the table of contents. The document has proofread, and the design has consistent margins, breaks between figures and paragraphs. | would've liked to fix the white space in the report but without using InDesign, there wasnt much Icould do within A WordPress. 5) How the group work succeeded and how it presented obstacles (a paragraph from each group member) * [worked alone, and it was great.A Style Sheet Guide Page Format orientation (tall, portrait) margins (one inch on both sides) footers (page number) numbering (front matter, in test results sections) graphic placement and width (1/8 margin) colors (screens, text, graphics, none) ‘Typography document title (Calibri headings, 24 pt, bold, left-aligned) document subtitles (Calibri headings, face, 14 pt, bold, left-aligned) title headings (Calibri headings, face, 16 pt,, bold, left-aligned) body text (Cambria body, face, 12 pt, left-aligned) figure headings (Cambria body, face, 8 pt, bold, left-aligned) lists (Cambria body, 8pt. left aligned) spacing (single, double between paragraphs) Mechanics Usage abbreviations to use after first reference acronyms to use after first reference CLAS: College of Liberal of Arts Sciences capitalization (any non-standard uses must be specified) hyphenation (off?) quotation marks (straight) spelling (U.S. English) steps: (numbers, bullets) active voice second person direct address of reader? (You should...) - only in tutorial/reference guide gender references (acceptable pronouns) Figures & Tables captions (numbers & titles in Cambria body, 8 pt,, bold, left-aligned) size & placement (non-specific) textual references to figures & tables (Camrbia body, 12 pt)April 6, 2016 Alex Chapin, Ceily Hamilton, & Laurie Parker CLAS University of North Carolina at Charlotte 9201 University City Blvd Charlotte, NC 28223-0001 Re; Usability testing for CLAS faculty profiles, using WordPress I would like to thank you for your time and input as our class tested the usability of the WordPress site for the College of Liberal Arts and Sciences (CLAS) faculty profiles, and with your assistance as we created reference guides for the CLAS Help Pages. Associate English Professor, Dr. Gregory Wickliff assigned this task to us as part of our class ENGL 4181: Writing User Documents. Our goal was to analyze the usability of the WordPress site by testing faculty, and in turn, develop a report that outlined those findings. The testing revealed that the main frustrations that faculty users encountered dealt with the navigation and basic understanding of the site: + The process of getting started to edit the profile was vague and WordPress lacks any obvious guidance. * Users did not understand the function or differences of having various locations to edit their profile (i.e. Customizer versus Appearance). ‘+ Users did not know the function of some widgets or the way to further edit them, and as a result, refused to include them on their profiles. ‘+ Both users failed to perform appearance edits beyond the initial layout of the profile, reference guide aims to resolve and supplement the difficulties faculty face when editing their profiles. Sincerely, Tayler Green Author cc: Gregory Wickliff, Assoc. Professor of English In summary, the report details these problems further, and my tutorial and 7 ptUsability Report of CLAS Pages: Editing Faculty Profiles SUBMITTED BY: Tayler Green ENGL 4181: Writing User Documents April 6, 2016 SUBMITTED TO: Dr. Gregory Wickliff, Assoc. Professor of English Alex Chapin, CLAS Executive Director of Academic Technologies Laurie Parker, CLAS Director of IT Ceily Hamilton, Humanities Consultantg Executive Summary: ‘The College of Liberal Arts and Sciences (CLAS) at UNC Charlotte tasked the ENGL 4181 Writing User Documents class with analyzing the usability of editing and creating CLAS faculty pages maintained by WordPress. As WordPress releases new updates and versions, the need for revised reference guides is prevalent as faculty members navigate the site. fo To measure the usability of the WordPress site angederstand how acl aeracig the ir profiles @e yonducted usability tests with the CLAS faculty members. ~ We yelected two faculty members from the CLAS with preexisting profiles to attempt the laid out on the usability test. a faculty users were encouraged to perform the tasks to the best of their ability, as well as'€xplore the site beyond the tasks andfiit their profile as they saw fit. This allowed the st(dent facilitator to observe how faculty users navigated and where they had difficulties with the new WordPress site. In summary, the main problems that faculty users encountered dealt with the navigation and basic understanding of the site and its functions: 1. Getting started on WordPress: ‘+ With the tasks the users performed, the faculty users both had a difficult time getting started once logged into WordPress. + Both users complained about the lack of gui and editing on WordPress. fance and logic when exploring 2. Design and navigation of WordPress: + Users did not understand the function or difference between the two locations on the site (Le. editing in the Customizer versus Appearance) to edit his/her profile, and found the purpose of two options to be convoluted. + Between tasks, users were unsure of which editing location to go to in order to edit their profile information or appearance aspects. 3. Unclear functionality of widgets: ‘+ Users did not know the function of some widgets or the way to further edit them, and as a result, refused to include them on their profiles (ie. the addition of a calendar to the profile, but no explanation of how to hyperlink dates within the calendar). * Users encountered an inability to edit the appearance of one’s profile beyond the initial layout; both users failed to use the widgets to add a tab to their profiles. ‘The usability report analyzes these problems further, and supplements them with the production of a tutorial and reference guide for the CLAS Help Pages. iiTable of Contents Executive Summary: 1. Getting started on WordPress... 2. Design and navigation of WordPress: 3. Unclear functionality of widgets:..... Findings and Recommendations. References. Suggested Tutorials to CLAS Help Pages... 1 Getting Started 2. Editing Tabs. 3. Adding and Editing. List of Figures Figure 2.2: Welcome Hyperlink Options.. Figure 2.3: WordPress Customizer Bar... Figure 2.4: Customizer Sidebar Figure 2.5: Live Preview of the Customize!Usability Report of CLAS Pages: Editing Faculty Profiles Introduction full management system with thousands of plugins, widgets, and themes entirely customizable to the user, WordPress runs on the basis of being a simple and flexible publishing tool. As open source software, each WordPress update brings changes to the thousands of functions within the site (WordPress). In order to keep navigation and usability clear, there must in turn be modified tutorials created alongside these updates. UNC Charlotte's College of Liberal Arts and Sciences (CLAS) employs WordPress as the software to manage their online faculty profile pages. Aggregated on the CLAS Connections site, the purpose of the page allows searches for connections across departments and disciplines for faculty profiles, research, and interests (CLAS-Pages). The CLAS encourages ‘their faculty to update these profiles for recent projects, research and blogs. As WordPress undergoes updates and functions within the site change, the CLAS Help Pages must be updated to aid faculty in their navigation and use of WordPress to modify their profiles. The CLAS got iy gouch with Dr. Wickliff in the English department to implement usability tests 6r faculty. The primary purpose of the usability tests was to identify where faculty users had difficulty as they edited their profiles within WordPress. ‘The scope of this report will address the main issues faculty users encountered as they edited their profiles using WordPress. The results will then provide a solution in the form ofa reference guide.Methodology ‘The group recruited faculty based off of personal connections through email, with the only requirement being that the faculty user was part of CLAS and had an existing profile to edit. Users were encouraged in the correspondence beforehand to gather any relevant resume or research updates they may want to include in the CLAS profile. The group and users agreed that the tests would take place in the office of the user, and that the usability tests would be performed on the users’ desktop computer, with a group member present to facilitate and observe the test. Before the start of the test, participants were asked a series of pre-test questions to create a demographic of the CLAS Pages users, in Figure 1.1 below: ‘eer 1: Faculy member of Unoversiy Wrting Programs Familiarity with WordPress Somewhat aise sting CLAS Poe acy prof Yee | Hye Reguarty of updating profile When reminded by CLAS Pages List update of profile Begining of at semester Use of CLAS Hap Pages toe profile: Yes se 2: act erie fiery Wri Fama with Word rest: Rot vey ustng CLAS Poe acl prof Yes | yes Replaray of updating pote: at cente iii profle | Programs Last update of profile: Last year ‘Use of CLAS Help Pages tei profile Yes Tews faster omens ‘The task list was constructed based gf of the WordPress account that directors of CLAS Pages had provided the class. There were initial concerns that the WordPress page in which the group had been provided did not have all the functions and accessibility that the faculty profiles did. The original task was made from a general idea that the sites would be similar. User tests were scheduled to take 10-20 minutes, depending on the user. Faculty users were provided with the task sheet to begin the edits on their profile pages. The usability tests began on the CLAS Pages site, where faculty users were required to login to a their accounts and start the tasks. nie ‘The first usability test revealed that the task list was not appropriate for the WordPress that faculty the group constructed a bropder talist which adjusted to the ‘user énteére< ess, the assumptions that the faculty WordPress site would be setup diferenly and that faculty users would have different accessibility tools were proven correct. However, because the user had prepared text to update her resume he ‘and had written out a few aspects of her profile to edit, the remainder of the usability test we ran through the facilitator following the user's process of updating her profile. When the first user completed the tasks she planned to update, the user entered the customizer an worked on the tasks that involved testing out the widgets on the profile. The second usability test followed the same procedural route as the first user, which created the modified task list below:1. at the exist ex of your profile—on the left sidebar ait the contact information widget o update your cutrent information 2.Gleks Save and publish to make sur takes Preview the changes 4 Bai/ipéate your profile pletre 5. Enter edit poges, and ei resume information * "Useblletpoints within your resume + canyou hyperlink your department within the text? 6 Enter the Customizer: ‘Align your name othe "Left Top" | + Ghange the Header image | + Change the background color Change he fentred image ‘Ade Header menu led Education” ‘Add widget for Links ‘Ada calendar widget: Can you ada inked date 1 nk your department on your pote page ‘The facilitator and observer encouraged users to think out loud through their execution of the tasks, reminding users that the test was on the usability of WordPress, and not of the user's abilities. The group did not provide assistance to the users when they had questions about the site, and only spoke to encourage users to move on to the next task to keep the user test within the time limit. Following the test, the users were asked a series of post-test questions. These questions helped to give a better picture of what the users thought of the interface. The users were also given the opportunity to provide any other additional feedback the test and questions may not have covered, in Figure 1.3, below: \Wnat was your main frustration with editing your profile? ‘Are there any features you wou like to kow more about tad to your profile? Our user participants all completed the usability tasks and questions, Findings from the usability tests are presented with screenshots and reported in the Test Results section with the data reviewed and condensed from observations.fe jwe Test Results ‘Two faculty users performed usability tests, anaes were able to complete all of the tasks set out before them, Each encountered théir own difficulties as they tried to edit thele— profiles with ‘WordPress. Ste-buruporreviee we categorized thelxissues into three mail in which we also propose potential solutions both here, and in the tutorial and reference guide. 1. Getting started on WordPress: Both users had existing profiles on the CLAS Faculty Pages, however neither consistently updated nor worked with WordPress routinely. Potentially due to the updates implemented by WordPress, which may have changed the initial layout of both the profiles and editing options, as well as a lack of experience with WordPress, faculty users had a difficult time getting started with the tasks of the usability test. Figure 21: Welcome Page of WordPress ‘The second user was at first confused by the home page layout, which she described as, “Its different from the last time I logged in,” but later complimented the home page for the "Welcome to WordPress” bar that appears when first logging in. The second user expressed her preference for the hyperlinks, which provided some guidance for where to begin editing. viiWelcome to WordPress! ee at suaed ee stpe More Aint Ss © canyoctotoe tert nan Figure 22: Welcome Hyperlink Options ‘The first user did not use the hyperlinks to begin her edits, but instead scrolled around the page for about a minute before clicking on the top bar for "+ New” icon. This also led her into the appropriate section to edit the profile text. Figure23: WordPress Customizer Bar ‘The process of beginning to edit on WordPress could be simplified with a guide to getting started, and should cover the various locations which users can enter to edit their profiles. 2. Design and navigation of WordPress Once users were away from the initial home screen, issues of navigation arose. Before the start of the test, the first user complained about her previous experience editing her profile, when WordPress had the update of two locations to edit one’s profile: the Customizer and Appearance options. Once the test began for both users, this problem became more explicit, as the users lacked any understanding or explanation why there were two different locations to make the same basic edits. Figure 24: Custominer Sidebar = © Between tasks, both users were unsure of which editing location to go to in order to edit their profile information or appearance aspects. The usability test included some tasks that guided the user on which to click on, but in other cases, did not, to see where faculty would click to t edit certain aspects. When unguided, in such case as the “Add a tab to t your profile task," the first user entered the Customizer and i - unsuccessfully attempted to use “Add Header Menu” to create a tab. ph fs + ‘The second user scrolled through the “edit appearance” location, Sy ya but gave up the task once none of the options seemed to work | 7 / when she previewed the changes. - Once within the Customizer, both users mostly had success with the sidebar of options to edit the appearance of their profiles. The first user admitted to having “No idea what some of these options mean,” villbutas she played around with their functions, came to figure them out and their Purposes within the profile. The icons highlighted in red in Figure 2.4 were the only two ‘options that both users were unable to discern their function or see any changes in the Customizer. a Changing the featured image, which is one of the oftions on the Customizer, didn't show any changes on the profile. The first user stated, “I don’t know what featured image is changing, because I don’t even know encountered the pecengyi to add fe preview. a widget for tLinks and havi noBaing Show Up Otte 7% Figure 25: Live Preview ofthe Customizer 1 Tipe Pavien Cuckte * ph USERS CLICK, Another error that the users encountered within the engl er was that they each attempted to click the live preview to make changes. It tok both users around one minute to realize that the live preview did not actively click anything and that they had touuse the sidebar of options: Even thet the second urerdld Wot Fécognize thatthe lve preview was updating the changes. 3. Unélear functionality of widgets: The users struggled to understand the function of some widgets or the way to further edit them. When tasked with the addition of a calendar to the profile, both users were able to add a calendar widget and successfully title it. However, the first userquestioned the fun any of the dates. nn of the calendar where there was no option to add hyperlinks to A similar issue occurred when the users were trying to add a widget for “Links,” and when nothing showed up on the live preview for either of the users. Both users also failed to use the widgets to add a tab to their profiles, which meant they were unable to edit the appearance of their profiles beyond the initial layout. During the post-test questions, the second user expressed a desire to know how to add tabs to her profile, which should be addressed in the modified reference guides, Itwas unclear at the time of testing whether these issues were a problem of faculty accessibility or a glitch within WordPress.yes mn Findings and Recommendations 90s The problems that the users encountered seem to occur most offen because many of the WordPress functions weren't self-explanatory and did not lend to the logic and routine that faculty used to edit their profiles before. ‘The addition of widgets to the WordPress update, in which Alex Chapin, CLAS Executive Director of Academic Technologies, suggested might be the an area of difficulty for faculty, revealed itself to be more of an issue of faculty's understanding of their use rather than the widgets’ actual usability. However, as it was mentioned before, some of the options for editing the appearance of the profile remain to be understood yet, such as changing the featured image option or adding a header title. ‘The latter appearance options could potentially be an issue of administration accessibility by faculty, or perhaps require an advanced understanding of WordPress in order to use. Specifically, with the addition of tabs to the profile, which was a question sent to Alex Chapin, it turned out to not be a glitch, but the users were simply going about it the wrong way. With this clarified, it seemjfo be one of the aspects that should be included in the reference guide. Finally, as faculty edit their profiles and begin to become more comfortable with the navigation of the site, the CLAS Help Pages should ensure that the guides cover more of the “extra” options that came with the widget update. This will meet the needs of faculty that wish to further customize their profiles, such as explaining how to add the social media live feed widget or changing the initial profile layout (i.e. adding tabs to the profile). The usability tests exposed a range of issues on WordPress and a better understanding of how faculty navigate WordPress to edit their profiles, which in turn, guides the modification of the reference guides available to update for the CLAS Help Pages. xiReferences Usability Test Participants: + User 1, UNC Charlotte, 3/24/2016 + User 2, UNC Charlotte, 4/4/2016 Supporting Documents * GLAS Pages Overview, video: httns://clas-pages.unce.edu/overview/ CLAS Help Pages: https://pages.uncc.edu/help/ ‘WordPress - About: https://wordpress.org/about/ WordPress - Features: ittps://wordpress.org/about/features/ Email Correspondence with Alex Chapin, Ceily Hamilton, 3/28/2016: ome? Suggested Tutorials to CLAS Help rr 1. Getting Started Once you're logged in to WordPress, the site will welcome you with this screen: ‘The icons highlighted in red are the various locations in which you can begin to edit your profile. The "Welcome to WordPress!” box provides multiple hyperlinks that redirect you to the aspects of your profile you would like to edit. By clicking the blue button “Customize Your Site,” you will be brought to the Customizer, which shows a live preview as you make edits, and add widgets and icons. On the upper WordPress bar, the “+New’ icon will direct you straight to the text on under your Full Profile to begin editing ‘The “Appearance” icon will bring forth another page that allows you to edit the widgets and icons that already exist on your profile from screen which does not have a live preview, like the Customizer does. Va Any of these optipas Will allow you to edit to your profile, but the “Welcome to WordPress” box that welcomes you upon login will be the easiest way to be guided to where you would like to modit¥ your profile. ill2. Editing Tabs The initial site faculty profiles are created with already have the menus and tabs set up in such a way that the new pages added to the site are automatically added to the menu. The initial site only has “Home” and “Updates.” ‘You may be interested in creating more tabs on your profile to separate your text, which is. pictured the example profile below: Multiple Tabs Commer Me Cee: Cover 011 Prone: 74870768 nat kan Jango xivst ‘Adding a tab to the top ofa profile: To add new tabs to the top of the faculty page requires the user to enter the Customizer and: 1. Click “Menu’ on the sidebar 2. Create a new menu 3. Add items to the menu 4. Then check the box under Menu Location for “Header Menu” z ae The last step ensures that the menu will be used as the header menu, or the taby/t the top of the page. 3. Adding and Editing Widgets To add a widget to your profile, enter the Customizer, and click on Widgets in the left sidebar. Your screen should appear as: Depending on where you would like to add or edit a widget, click the appropriate area listed in the left sidebar. Note that the preview of the profile is not an actively clickable screen—all changes you would like to make in the Customizer must be made through the options on the left sidebar—the profile is simplefa live preview of the changes you make with the sidebar. For example, to edit the the “Contact Me” section: 1. Click on the “Left Sidebar” tabClick the “Contact Information” icon Edit the information under “Title” and “Contact Info” ‘Check the box “Automatically add paragraphs" to format correctly Save and publish the changes pee Te tomy fone xvi