MSU Libraries Website Report: Home Page Color Scheme & Mobile Information Architecture. Prepared by: Daniel Bedich, Irfan Mir, and Nick Simon

Transcription

1 MSU Libraries Website Report: Home Page Color Scheme & Mobile Information Architecture Prepared by: Daniel Bedich, Irfan Mir, and Nick Simon Submission Date:

2 Contents 1.0 Executive Summary 2.0 Introduction 3.0 Our process 4.0 Participants 5.0 Findings and Recommendations 6.0 Research Opportunities 7.0 Deliverables

3 1.0 Executive Summary This project set out to analyze the homepage of MSU libraries website to determine if the current design was placing emphasis on the correct content and to confirm what this content was. To better understand the user base and to answer the above questions, we engaged in an iterative design process with the home page compositions. This process involved 3 rounds of user surveys that influenced our design revisions and ultimately fulfilled our goals of establishing proper hierarchy and direction in MSU Libraries home page. Findings The insights from our iterative process of research and design concluded with the following trends: 1. Contrast draws attention to the colored areas 2. Grey symbolizes out-of-order or disabled 3. Users prefer a conformity with MSU green 4. Search, Today s Hours, and Quick Links are the most important pieces of information, in that order Recommendations If allowed more time, we would proceed in this project by furthering research into what users feel about every element ( box ) of the homepage. We would begin doing this by gathering a greater quantity of tests while aiming to keep the same or greater standard of quality. Secondly, we would extend and invitation to participate in dedicated interviews and usability tests to confirm the findings. We hope to do this and believe it would be done amongst a diverse collection of students. The final step in completing the project is to implement the design we have suggested methods to do so in the Research Opportunities section of this document.

4 2.0 Introduction The following report details the process, data, and findings from the user surveys and usability tests our team has been conducting since February, Our goal was to discover how different colors on MSU Libraries homepage affected how users perceive content and how we could change the colors to alter this perception for both the users and libraries benefit. We analyzed the current design of MSU Libraries website and determined whether the current color scheme puts emphasis on the desired content or not. To determine this, we conducted three rounds of user tests, both surveys and usability tests, to influence our design decisions and aim to communicate them here. The scope of this project, as assigned, is to determine the content that seems the most important to the user, and, if time allows, an analysis of the mobile-site s information architecture. 3.0 Our process From the kickoff-meeting we learned that the client believes the current design achieves the opposite of what it's intended to do. That is, the current color scheme of the content boxes draws attention towards the less important content first, which is grey. Our research was focused to provide solutions to the following concerns: What content is one first drawn to when he or she sees the home page Why is their attention drawn to that particular area How often do they visit MSU Libraries website What is perceived as the most important content Which redesign is preferred The client provided us with multiple design compositions as a starting point from which we began our initial research to answer these concerns. The questions we developed were designed to give us insight into what users think about the home page as basis for our design decisions. In order to confirm or deny the client s concern, we began by asking the initial focus of the user followed by an explanation. This also gave users a chance to express anything they found undesirable. These extra remarks (qualitative data) proved to

5 be key as they appeared to form trends that we used to guide our revisions. Next, we asked the users what the most important content to them was in order to ensure it was the same content that client initially assumed. In addition, we used this data to guide our revision of the mobile-site s information architecture. Thirdly, our purpose in asking the frequency of each user's visits was to weigh certain opinions above others if need be. If someone used the website daily, we placed more importance on their feedback (and user quotes) as opposed to someone else who rarely uses it. Lastly, we asked which composition the users preferred to determine if their was a discrepancy between which wireframe drew attention to important content best, and which was most aesthetically pleasing. If one composition achieved better visual design, but another achieved better functionality, we constructed a hybrid of the two. During the first round of research, we printed off the design compositions the client provided us to perform a large amount of surveys in a short amount of time. These 5 second user surveys attempted to gain mass-insight even if sacrificing quality for quantity. We decided to do because the project had just begun and we didn t have any data on the users themselves. The key element in user-centered design methodology is to have the user in mind from which all else can follow. All of the user tests took place on campus, with the majority taken in the library. Once we finished the first round of user surveys, we analyzed the results, watched trends form, and holistically comprehended the user tests. With this newly established understanding, our revisions were derived from the collected data with functionality and aesthetics in consideration. Afterwards, we would test our designs amongst users in the library and thus began our iterative process in refining and revising from those results. As a team, we strove to use our research to be empathetic in our methodology and implementation as we are three people of thousands that enter MSU Libraries each day. As the project progressed, so did our user surveys that allowed for better results and better revisions. We would perform heuristic analysis on the current and previous designs while incorporating the user survey results themselves. By reflecting on our strong and weak points collectively, we were able form a better design that further satisfied the client and user confirmed by the next tests. To reach closer to completion, we designed the tests to precisely evaluate our changes and thoughts on upcoming directions. The initial user surveys began with relatively vague usability questions in order to understand what was needed and wanted which was followed by reorganized and redesigned surveys to understand how

6 these things needed to be changed. In doing so, we were able to make informed design decisions with the confidence that users would be pleased by the results. Furthermore, we aimed at improving the quality of the survey to provoke discussions with the users. Our results decreased in quantity, but we feel the quality made up for any supposed loss. In this new round of tests, we changed the medium from print to digital to ensure that the print appearance was not affecting the results. These higher fidelity surveys are what lead us to the final compositions with no questions left unanswered. Once the team reached a design that satisfied the client and had the research to back it, a final user survey was conducted to ensure all initial problems were solved. This determined that the new design satisfied both the majority of the users, and the client, agreed that it was visually pleasing. Once the consensus that the revision was aesthetically pleasing and ultimately usable, we were certain that it was the final composition. After determining the final composition, we then expanded our scope, and adjusted for an additional project suggested by the client. This additional task was to analyze the information architecture of the mobile page and implement a redesign, if necessary. Before doing so, we conducted one final user survey to find out what content users would use more frequently on a mobile platform. When people access a mobile site, by definition, they are mobile so we put the most accessed and desired information at the top of the page to minimize the need to scroll and search. In addition, the mobile site now matched the new design of the desktop site for the purpose of conformity. Through this extensive research and iterative design process, we were able to redesign the homepage for improved content strategy and an overall improved user experience. 4.0 Participants The participants that we used in research were selected at random. Thus, if they happened to be in the library when we were researching and they accepted our request to partake in the research, then we recorded their choices and comments. Each research test was done to either a single student or group of students. There was always an opportunity to disclose major however many chose not to disclose; in fact, some preferred first names over major. The bias we exhibited however was to ensure that these students had used MSU Libraries and its website with some degree of frequency. Passing our bias consisted

7 of the following conditions: if they were studying in the library, willing to participate, and were MSU students. 5.0 Findings and Recommendations We believe our findings are ready to implement with data that precedes them. We first went about seeing what brought the most important information to the users eyes first. After 2 weeks of testing, the data revealed that grey attracted the users attention more than white. We then took this process one step further with more variations of the opposite wireframe that were created and tested alongside the original opposite wireframe. A hybrid wireframe was then chosen to be the most popular version among users and then, of course, further tested. This revision aligned the boxes which were previously unaligned, applied box shadows from a single light source; at 90 degrees with 3px of distance, left aligned the text within the boxes; to increase legibility, and lastly applied an MSU green to the headers of the important content; to emphasize importance. The body of the important boxes was filled with 65% of the MSU green over white, and the boxes that contain the less crucial information have a rgb(255, 255, 255) solid white with the same box shadow. The mobile testing and revisions were completed in the final week of our project. We formatted the boxes in accordance to the desktop site for conformity. However, since mobile users see the content boxes stacked on top of each other, we needed to create a logical content hierarchy. After conducting user tests we established the hierarchy and found a prefered information architecture. The order is as follows: Search Bar, Today s Hours, Quick Links, What s New, MSU Libraries, and Support the Libraries. 6.0 Research Opportunities To further and implement our findings, we have developed a suggested process. The first and foremost measure is to implement the proper colors in the design compositions. Secondly, we present a method for developing the suggested revision. And, lastly, further areas of research to explore. In designing the revisions, we worked with rendered bitmaps, by which we mean our resources were limited. This lead to sampling of current colors and styles for consistency. The darker shade of green should be replaced with the proper value of

8 MSU Green and in the bodies of the content-boxes, 65% opacity of MSU Green over rgb (255, 255, 255) pure-white. It should be noted that we were given a website depicting MSU s branding policies. The guidelines noted that MSU Green is a different rgb value in Photoshop, Illustrator, and the web; and, we only found the web rgb values. The color consisted of a dark-blue hue when we implemented said rgb values in Photoshop, which we understood went against the brand; therefore, we approximated with the darkest green already used in the existing composition. Next, in examining the responsivity of the site when preparing for the additional mobile information architecture reevaluation, it was noticed that the content-boxes stack, in the single column, in a particular order. Our research suggests a different order sorted by importance to the user. We understand that switching this stacking order may be difficult and our development experience has lead us to a solution albeit modern may be the easiest method of implementation. This method is called the flexible-box-model, or flexbox, and is part of CSS3. Essentially, it is a wholly new method of aligning, positioning, and stacking elements in CSS. More on the CSS specification is featured in the publication: and it appears to have ( at least partial ) support in every modern browser, as depcited below, according to caniuse ( ) that also has verified resources on the proper implementation. However, especially in an academic setting, complete or quasi-complete support is essential and the alternatives include using a javascript polyfill* to establish

9 support in legacy browsers or a implementing something similar to the flex-order in javascript, which could be as simple as the following: HTML: <main role= main > <div id= search data-boxnumber= 0 >...</div> <div class= box id= quicklinks data-boxnumber= 2 >...</div> <div class= box id= whatsnew data-boxnumber= 3 >...</div> <div class= box id= uniqueatmsulibraries data-boxnumber= 4 >...</div> <div class= box id= supportmsulibraries data-boxnumber= 5 >...</div> <div class= box id= hours data-boxnumber= 1 >...</div> </main> jquery: $( #main div ).sort(function(a, b){ return $(a).attr('data-boxnumber') - $(b).attr('data-boxnumber'); }).appendto('#main'); The key components being the existence of an html attribute whose values are the order of the boxes and then sorting them in javascript. Lastly, we received various interesting comments that are grouped along with the deliverables; however, it was improbable to act on all of them or even all the trends as that was beyond scope. We have left our raw-data with the rest of the deliverables and suggest that further research is conducted or the remaining trends are pursued as they reflect the opinion of the user whom all else is below. *polyfills are known to hinder performance as they are usually excessive in length. 7.0 Deliverables As assured in the proposal and contract agreed upon by the client and ourselves, we have included a series of deliverables that solidify our research and results. The client can expect these in a compressed zip folder ed to her the 30th of April, which when expanded will include the following: 1. The final presentation ( as a pdf ) 2. Final Report ( in print and as a pdf ) 3. Our research findings ( as pdfs and excel spreadsheets ) 4. Charts visualising the mains trends ( print ) 5. Interactive revision flow ( as pdf and Axure RP ) 6. Mental Model ( as EPS vector ) 7. Final desktop / tablet revision ( png ) 8. Final mobile revision ( png and psd ) Print deliverables:

10 Preference of original composition in initial testing Preference of revision in Phase 2 testing Importance of content in mobile access