Interaction Design I
Process Book
Usability study of the UNL website
User Centered Design U NIV E RSITY OF NEBRASKA - LI NCO LN
Research Team: Jennifer Evans, Joseph Gentzler, Amanda Kessler, Ooran King, Rachael Kocarnik, John Marshbanks, Matthew Moore, Nicholas Sharon, Vantha Tep, Joshua Thorne, Tiffany Wieser, Caroline Wilson Professor: Colleen Syron Fall 2013
is a design philosophy that puts the user of a product, application, or experience, at the center of the design process. In UCD, a designer strives for a detailed understanding of the needs, wants, and limitations of the people who will use the end product and then makes design choices that incorporate this understanding.1
Question:
How user friendly is the University’s website?
Step 1:
Design the test
Goal:
Gather Qualitative & Quantitative Research Test Format Task based with moderator Introduction & background questionnaire Task based interview Exit questionnaire & debriefing Requested time commitment
Methodology: 5-10 minutes 30-45 minutes 5 minutes Approximately 1 hour
Who we tested 103 participants, having the following profile characteristics,
Age
Gender
Residence In-state
87
58
Out of state
16
30-40 40+
4 28
TOTAL
TOTAL
103
Female
51 52
15-20
13
20-30
TOTAL
103
Male
What they are
Year in School N/A Freshman
54 3
Sophomore Junior
13 14
Senior Sen+
15 4
TOTAL
103
103
Have you seen unl.edu? No
27
Yes
76
TOTAL
103
Faculty / Alumni
7
What factors influenced you when choosing?
Parent of Prospective
5
Football/Sports
Prospective Student Prospective UNL Student
8 13
Brochures
7
Parents
2
Staff Reputation
21 47
Student
53
Advertisements Alumni
4 10
TOTAL
103
Scholarships
40
Cost
58
Campus Visit
44
UNL Student 45 Non-UNL University Student 25 TOTAL
103
TOTAL
Who is responsible for choosing a school 25
103
Both
48
Step 2:
Conduct the interviews
Determine how easy it is to navigate to three very popular areas of study: Advertising, Graphic Design, & Web Design.
From off-campus home page:
Where is Advertising?
33% Once on the Prospective Student page, visitors would need to click 4 more times before landing the Advertising home page. > 5 CLICKS
23%
10%
After clicking on College of Journalism & Mass Communication bubble they would then click on a link to the advertising home page.
Ten percent of people clicked on the Business college which would not lead them in the right direction. Another ten percent clicked on Colleges and Departments where clicking on Advertising would lead them to the home page.
> 2 CLICKS
> 2 CLICKS
OFF CAMPUS SURVEYS (88 PEOPLE)
38%
11%
27%
24%
PROSPECTIVE STUDENT COLLEGE OF ARTS AND SCIENCES COLLEGE OF JOURNALISM & MASS COMMUNICATION OTHER
From off-campus home page:
Where is Graphic Design?
27%
Unfortunately visitors would need to click to majors, then click graphic design before they would be able to get to the desired page.
24% There is no clear path for visitors to take through College of Arts and Sciences. Graphic Design cannot be located through this page.
11% There is no clear path for visitors to take through College of Journalism and Mass Communication. Graphic Design cannot be located through this page.
OFF CAMPUS SURVEYS (88 PEOPLE)
23% 50%
11%
16% 11% 11%
PROSPECTIVE STUDENT ARTS & SCIENCES SEARCH BAR OTHER
From off-campus home page:
Where is Web Design?
23%
Visitors that were searching for the Web Design page that clicked on prospective student first.
16%
Visitors that were searching for the Web Design page that clicked on Arts and Sciences first.
11%
Visitors that were searching for the Web Design page that used the search bar.
From on-campus home page:
Where is Advertising?
41% Once on the Prospective Student page, visitors would need to click 4 more times before landing the Advertising home page. > 5 CLICKS
26% After clicking on Colleges and Departments, the user would then click Advertising which leads them to the home page. > 2 CLICKS
12% After searching ‘advertising’ the visitor could click on the first link which takes them to the College of Journalism. The college home page then provides a link to the Advertising home page. > 3 CLICKS
ON CAMPUS SURVEYS (34 PEOPLE) 20% 50%
12%
9%
9%
COLLEGES & DEPARTMENTS SEARCH BAR
PROSPECTIVE STUDENT NO WHERE OTHER
From on-campus home page:
Where is Graphic Design?
20% Users that visited the UNL website ON campus, clicked on Colleges and Departments.
12% Users that were searching for the Graphic Design, searched using the search bar.
9% Users who didn’t use the search box, clicked on Prospective Students.
ON CAMPUS SURVEYS (34 PEOPLE)
26%
32%
9% 8%
12% 9%
12%
11% COLLEGES AND DEPARTMENTS SEARCH Bar NOWHERE FACULTY AND STAFF PROSPECTIVE OTHER
From on-campus home page:
Where is Web Design?
26% Visitors that were searching for the Web Design page that clicked on the Colleges and Departments tab first.
12% Visitors that were searching for the Web Design page that clicked on the Search bar first.
12% Visitors that were searching for the Web Design page that didn’t know where to click.
Comparison:
What’s your impression?
Webpage Ratings Based on a scale from 1-5. Results indicate sum of positive numbers
INSPIRATIONAL
GRAPHIC DESIGN ADVERTISING EASY TO USE
ATTRACTIVE
CLEAR
HIGH TECH
20 22 38 44 20 29 37 39 %
%
%
%
%
%
%
%
FRIENDLY
INFORMATIVE
PROFESSIONAL
EASY TO FIND
34 41 40 48 27 41 49 50 56 62 %
%
%
%
%
%
%
%
% %
Step 3:
Make recommendations
Recommendation #1:
Reduce the number of clicks
From the Hixson-Lied College landing page users must click three more times to find information about all of the possible areas of interest.
Recommendation: From the main Hixson-Lied College landing page, provide a direct link to all majors and concentrations.
By organizing the majors & concentrations by schools, the topics users are looking for are hidden. Furthermore you are requiring users to have an understanding of how the College is internally organized before providing them the page they seek.
Group these “majors and concentrations” under a general name such as “Areas of Study.”
Renown usability expert Jakob Nielsen says “User often leave Web pages in 10-20 seconds, but pages with a clear value proposition can hold people’s attention much longer because visit-durations follow a negative Weibull distribution.”2 Given the fact that most users leave a site within 5 clicks, the probability of them getting to these pages is highly improbable.
How Long Do Users Stay on Web Pages? http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ 2
?
Recommendation #2:
Add more “interest� pages
There are a lot of interesting topics being taught across the school that overlap with schools and majors. Add pages to talk about some of those topics (web design, interactive design, animation, mobile app design.) If there is a concern that we are misrepresenting our current “majors�, copy can talk to the fact that the college is robust enough to offer hybrid concentrations. Eventually the University should develop a degree program that addresses some of the more contemporary trends in design (motion, interactivity, web, animation,...) and clearly distinguish these the complementary nature of these classes across colleges.
Step 4:
Wireframe prototypes
An important aspect of usercentered design is wireframing, concepting and prototyping. Like Charles Peirce’s model for interpreting meaning, UX design is iterative.
Prototype 1 by Amanda Kessler, Caroline Wilson, Joshua Thorne UNIVERSITY OF NEBRASKA-LINCOLN
UNIVERSITY OF NEBRASKA-LINCOLN Article Title Read more here. ABOUT
P RO S P E C T I V E S T U D E N T
ACADEMICS
CURRENT STUDENT
TUITION
VISIT
FACULTY
APPLY
Article Title Read more here.
AC ADEMI CS ABOUT
P RO S P E C T I V E S T U D E N T
CURRENT STUDENT
FACULTY COLLEGES AND DEPARTMENTS
HIXSON-LIED
AREAS OF STUDY
UNL Copyright 2013
In our home page we wanted to be able to filter visitors unobtrusively without taking them away from the page itself. We also wanted to show some content about the university by having a large photo and news area that is dynamic. When a user chooses one of the four main tabs the large photo will move up revealing information pertinent to that chosen tab. On default the prospective student page will already have the “Academics” button selected. That information is below and allows a user to look up areas of study within the different colleges and departments. The search bar this version of the site uses would be designed to look under tagged queries if the user doesn’t want to click through buttons and tabs.
UNL > HIXSON LIED
UNL > HIXSON-LIED > GRAPHIC DESIGN
HIXSON - LIED
GRAPHIC DESIGN
School of Fine and Performing Arts ABOUT
A R E A S O F S T U DY
DEGREES
EVENTS
ABOUT
COURSES
P ROGRA MS WITHIN THE HIXS O N -LIE D CO LLE GE A B C D E F G H I J K L M N O P Q R ST UVW XY Z
FACULTY
OPPORTUNITIES RELATED INTERESTS GRAPHIC DESIGN
This page continues to help prospective Hixson-Lied students to navigate to their areas of interest. By default, it opens at the “areas of study” tab. Other tabs contain information regarding the Hixson-Lied College. The next page focuses on the graphic design program within Hixson-Lied. Template wise this would change little across other areas of interest.
Prototype 2 by Tiffany Wieser, Rachel Kocarnik, Ooran King, and Joey Gentzler After testing and analyzing the functionality and structure of UNL’s website it became apparent there is still much room for improvement. We eventually arrived at the conclusion that to help users get to where they want to go in the least amount of time, they need complete control from the very beginning. The use of a simple preliminary navigation page, or “modal”, gives the user a head start by allowing them to choose a path respective to their individual status or goal.
Visi to r
Current Student
Pr ospe ct ive Student
Al umni
Our modal is broken up into five choices catering to visitors, prospective students, current students, faculty and staff, and alumni. Because of the possibility that some content may overlap with another section, users will be able to easily move between each designation in the modal at any time during their browsing. Aesthetically, the simplistic page and its few components would be accompanied by a background image slide show of different images representative of the university.
Facu lt y
PROSPECTIVE STUDENT
APPLY VISIT FINANCIAL STUDENT LIFE EVENTS
APPLY
VISIT
STUDENT LIFE
SEARCH CAREERS/MAJORS/INTERESTS GRAPHI| GRAPHIC DESIGN
WEB DESIGN
ADVERTISING
COPYRIGHT INFO
FINANCIAL
EVENTS
For the Prospective Student Homepage, we wanted students to be able to see and find what they came to the site for right away, the majors. Knowing that there are over 150 offered majors at UNL and that could be overwhelming to look at, the best possible solution we came up with was a search bar where a specific major, college, or even interest could be entered and only relevant majors would then pop up. The majors would pop up in boxes that give a photo relevant to that major and clicking on it would give a short blurb about it before taking you to that specific major’s homepage. Also included on this page would be a drop down banner on the top right. Again to keep the user from navigating page to page, the user can change their experience from prospective student to one of the other options seen on the home modal. This tab will be continuous throughout every page. Continuing with this theme, a connect tab is located on the right side of the page, which reveals links to; Facebook, Twitter and other social media, email address to ask questions, Live Chat, and a quick link to the Application page. Across the top there is another link for the application page as well as links to visit campus, a breakdown of potential costs under financial, different events catered to prospective students, and more information on student life at UNL.
PROSPECTIVE STUDENT
APPLY VISIT FINANCIAL STUDENT LIFE EVENTS Home > Graphic Design
MEET THE PROFESSORS
About UsV
ABOUT
irtual Tour Course Map Featured Work
Legacy
The Graphic Design program prepares students to enter the dynamic arena of digital communication design, leading to an expanding array of professions including working for a large design studio, a marketing firm, a small startup, or as a freelance designer. Designers often work creating visual products, but an art degree with an emphasis in Graphic Design can also lead to careers in art direction, web development, corporate communications, and advertising. At the heart of Graphic Design is effective communication: while developing a personal aesthetic and design values, students are also asked to form cohesive ideas, write design briefs and project budgets, and give presentations on their work. We strive to create designers with lasting skills that make them valuable to clients and employers.
Virtual Tour
Map Your Courses
BA BFA MFA
For the graphic design page, we chose to do a parallax layout. We decided to do this to keep all the information on one page. We think this is the most effective way so that we don’t have to open up a new page to find the information and then try to find our way back. The top menu bar is going to give you the same as the home page menu bar. Then, we will have a second menu bar that will lock at the top of the page as you scroll down the parallax page. The page will automatically scroll down for you as you click an option on the second menu bar. The faculty/staff information is the first thing on the page. This will make it easy to find someone to contact that can answer questions. Then we added courses, featured work, Graduate’s current jobs, virtual tour, and about graphic design. We thought this information would be the most important to include on our page to inform prospective students.
Featured Work
Our team went in a very condensed, but refined direction with our redesign of the route to the Graphic Design homepage. As we have been learning in this class, it is so important to design for the user and what they ultimately want. We felt it would be in the users best interest to experience a modal as they approach the UNL homepage. This allows for one to have a tailored experience with distilled information that they need. Once the user clicks on their specific title (in our case, the prospective student) they are lead to that particular homepage. Our prospective student homepage is a chance to get some interesting information into the mind of someone looking for a school. From this homepage, the user is able to type in what they are interested in, which leads them to the Graphic Design homepage. It was very important to us that the destination only by 3 clicks away, at the most. Our team definitely sees this as a minimalist approach to design, but a necessary change to the overload of often irrelevant information currently displayed.
Legacy
COPYRIGHT INFO
Prototype 3 by Jen Evans, Vantha Tep, Nick Sharon, John Marshbanks III
Taking a look at our usability test we noticed that users were unable to navigate to the Hixson Lied Home Page, but the Graphic Design Page without using the search box. So, based off these results from our test we suggest:
University of Nebraska Lincoln There Is No Place
Future Students
Alumni
Current Students
Visit
Login UNL start with a new face, a new home page, but not only just a new design to the home page we took a lot of the type because we didn’t want the reader to feel overwhelmed. •
An ever better interface that we came up with was the use for a splash page that will pop up before you even enter the home page. The neat feature that we have added to the splash page is the feature to be able to login into your own personal account through unl.edu. You will be able to look up your current class schedule, a list of all your professors, campus and community events that interest you, etc.
•
You are now able to get to any department page within 3 clicks.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim a lectus eu malesuada. Nulla facilisi. Morbi et rhoncus nibh, sit amet pharetra ligula. Maecenas vel mollis sapien. Proin ornare tortor vel magna vestibulum pharetra. Pellentesque in eros sit amet lorem suscipit convallis.
Search
Login
Like NEBRASKA
Academics
Staff
Colleges and Departments
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vehicula arcu eget facilisis volutpat. Nam quis tortor quis leo luctus suscipit. Nam congue laoreet orci, vitae molestie leo scelerisque eleifend. Cras pulvinar nisl vel sollicitudin laoreet.
Alumni
News/Events
UNL Today
Etiam gravida magna a interdum hendrerit. Donec in arcu leo. Morbi dignissim sed tortor id eleifend. Maecenas elementum hendrerit convallis. Sed accumsan tincidunt neque nec euismod. Phasellus fermentum pretium elit eget euismod. Praesent quis elit quis diam
University of Nebraska Lincoln There Is No Place
Future Students
Current Students
Visit
Search
Login
Like NEBRASKA
Academics
Staff
Colleges and Departments
Alumni
News/Events
University of Nebraska Lincoln There Is No Place
Future Students
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vehicula arcu eget facilisis volutpat. Nam quis tortor quis leo luctus suscipit. Nam congue laoreet orci, vitae molestie leo scelerisque eleifend. Cras pulvinar nisl vel sollicitudin laoreet.
Current Students
•
Academics
Staff
Alumni
News/Events
UNL Today
Etiam gravida magna a interdum hendrerit. Donec in arcu leo. Morbi dignissim sed tortor id eleifend. Maecenas elementum hendrerit convallis. Sed accumsan tincidunt neque nec euismod. Phasellus fermentum pretium elit eget euismod. Praesent quis elit quis diam
The Hixson Lied College took on a slight make over as well • • • • •
Login
Like NEBRASKA
Visit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim a lectus eu malesuada. Nulla facilisi. Morbi et rhoncus nibh, sit amet pharetra ligula. Maecenas vel mollis sapien. Proin ornare tortor vel magna vestibulum pharetra. Pellentesque in eros sit amet lorem suscipit convallis.
Search
Went with simplicity and clean look New page design Easy to navigate New design Keeping pages somewhat consistent throughout the entire website so it will be easy to navigate. Majors is now listed on the page
Colleges and Departments
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim a lectus eu malesuada. Nulla facilisi. Morbi et rhoncus nibh, sit amet pharetra ligula. Maecenas vel mollis sapien. Proin ornare tortor vel magna vestibulum pharetra. Pellentesque in eros sit amet lorem suscipit convallis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vehicula arcu eget facilisis volutpat. Nam quis tortor quis leo luctus suscipit. Nam congue laoreet orci, vitae molestie leo scelerisque eleifend. Cras pulvinar nisl vel sollicitudin laoreet.
UNL Today
Etiam gravida magna a interdum hendrerit. Donec in arcu leo. Morbi dignissim sed tortor id eleifend. Maecenas elementum hendrerit convallis. Sed accumsan tincidunt neque nec euismod. Phasellus fermentum pretium elit eget euismod. Praesent quis elit quis diam
Graphic Design • • • •
New page design Better flow Login screen, student works ( Portfolio ) , and staff at easy access More graphics ( This is a Graphic Design Page )