Accessibility Services Mobile Website Proposal (accessibility.utoronto.ca) Lake Porter Table of Contents Introduction ..................................................................................................................................................... 2 Desktop Homepage Wireframe.................................................................................................................. 3 Desktop How to Register Wireframe ....................................................................................................... 4 Desktop Registration Packages ................................................................................................................. 5 Desktop Website ............................................................................................................................................. 6 Mobile Homepage and Registration Wireframes ................................................................................ 8 Mobile Contact Wireframes ........................................................................................................................ 9 Mobile Website..............................................................................................................................................10 Conclusion.......................................................................................................................................................11 Introduction Accessibility Services is the organization within the University in charge of putting in place accommodations for students with disabilities and ensuring that the University stays in compliance with the Human Rights Code of Canada (with respect to disability) and the Accessibility for Ontarians with Disabilities Act. The organization serves more than 2000 student who have a wide range of disabilities, so it’s very important that all of its services remain accessible. The desktop version of the Accessibility Services website inherits its purpose from a time when the Internet was much younger. Designed to deliver information the website falls short when addressing the transactional expectations on today's users. This is especially true of today's mobile users who typically go to a web site to accomplish a specific task and expect more than information about the task. Accessibility Services hopes to evolve its website so it can take a more central role in the organization. The website has recently been redesigned, bringing it to a current and minimalist state. The plan is for this redesign to continue, building the site up from minimalism by adding content in a thoughtful way. The fist step to adding content was taken at the organizations last staff retreat where the entire staff participated in a persona exercise which evaluated the current site from the perspective of several personas and suggested a way forward. The outcome of this exercise was mostly focused on what information should be available on the site and mostly stayed within the bounds of considering a website that performs an informative role. An excellent way to push the evolution of the site forward is to design a mobile version of the website. A mobile design of the site would address the needs of the growing population of mobile users and change the role of the website from being purely informational to being transaction and action based. A typical mobile user will go to a website with a particular goal in mind. Often this goal involves more than getting a piece of information but rather accomplishing an action. This is a transactional approach to surfing the web. Examples of transactions students expect to be able to accomplish on the Accessibility Services web site include registering for the service, contacting the service and accessing programs and services offered by the organization. Students will expect to accomplish these tasks on the web site, as opposed to just getting information about them. (For example, filling out a form and pushing submit; clicking a phone number to start a call or calling up a map with instructions.) This paper will consider the desktop version of the site going 3 levels down the registration path and then propose a mobile version of the site addressing the transactions of registering and contacting the service. 2
1. U of T Crest
2. Global Navigation (top)
U of T Home | Portal | Site Map | Contacts | Campus Maps | A-Z Index
3. Search
4. Organizational Banner
text
1.0
Home
Welcome Heading
About Us
New Student Checklist
Returning Student
Checklist
Contact Us
How to Register
1.2
1.1
Registered Students
Financial Resources and
Support
Peer Mentoring
Test & Exam Services
Volunteer Note-taking
Faculty and Staff
6. ULife icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis. Proin ultrices, tellus quis
imperdiet feugiat, urna risus viverra felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis:
•
•
•
•
•
•
•
•
•
•
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
New Student Checklist
Returning Student Checklist
U of T Home | Portal | Site Map | Campus Maps | A-Z Index | Contact Us
© University of Toronto
www.utoronto.ca | Contacts | University Switchboard: +1 416 978 2011
2. Global Navigation (bottom)
5. Footer
Robarts Library: 130 St. George Street, Toronto, ON M5S 3H1 (1st Floor) | 215 Huron Street 9th Floor, Room 939 Toronto, ON M5S 1A2
Search
1. U of T Crest
2. Global Navigatoin
4. Organizational Banner
> Home > How to Register
U of T Home | Portal | Site Map | Contacts | Campus Maps | A-Z Index
3. Search
5. Bread Crumbs
Register with Accessibility Services in Three Steps
2.3
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis. Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis.
Home
Contact Us
How to Register
Search
text
2.2
Registration Packages by
Disability
Your Intake Interview and
Next Steps
Moving Forward Transition
Program
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis. Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis. Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis.
You Can Register with Accessibility Services at Any Time
2.4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien posuere
vitae luctus quam lobortis. Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien posuere vitae luctus quam lobortis.
Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis.
Registered Students
Financial Resources and
Support
Peer Mentoring
Test & Exam Services
Volunteer Note-taking
Faculty and Staff
6. ULife icon
U of T Home | Portal | Site Map | Campus Maps | A-Z Index | Contact Us
2. Global Navigation (bottom)
© University of Toronto
www.utoronto.ca | Contacts | University Switchboard: +1 416 978 2011
5. Footer
Robarts Library: 130 St. George Street, Toronto, ON M5S 3H1 (1st Floor) | 215 Huron Street 9th Floor, Room 939 Toronto, ON M5S 1A2
1. U of T Crest
2. Global Navigatoin
U of T Home | Portal | Site Map | Contacts | Campus Maps | A-Z Index
3. Search
4. Organizational Banner
> Home > How to Register > Registration Packages by Disability
5. Bread Crumbs
Registration Packages and Documentation Requirments
Home
Contact Us
Your Intake Interview and
Next Steps
Moving Forward Transition
Program
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis. Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis.
Registration Package 1
3.4
Registration Package 2
Registration Package 3
Registration Package 4
Registration Package 5
Registered Students
Registration Package 6
Financial Resources and
Support
Registration Package 7
Peer Mentoring
Test & Exam Services
Volunteer Note-taking
3.3
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat neque, ac ultrices eros. Nulla facilisis eros ut sapien
posuere vitae luctus quam lobortis. Proin ultrices, tellus quis imperdiet feugiat, urna risus viverra felis.
How to Register
Registration Packages by
Disability
Search
text
Registration Package 8
Registration Package 9
Registration Package 10
Faculty and Staff
6. ULife icon
U of T Home | Portal | Site Map | Campus Maps | A-Z Index | Contact Us
2. Global Navigation (bottom)
© University of Toronto
www.utoronto.ca | Contacts | University Switchboard: +1 416 978 2011
5. Footer
Robarts Library: 130 St. George Street, Toronto, ON M5S 3H1 (1st Floor) | 215 Huron Street 9th Floor, Room 939 Toronto, ON M5S 1A2
Desktop Website The design of the desktop site caters to different types of users that come to the site by categorizing information according to user type. There are three different types of users addressed in the main navigation of the site: new students, registered students, and faculty and staff. This site organization is ill suited to mobile web as it creates longer navigation menus and focuses on which information should be delivered as opposed to what tasks need to be done. The home page of the mobile site should offer users a set of tasks that they can accomplish on the site (register with the service, contact the service, access programs and services and see current announcements.) The smaller screen size of a mobile device means that there isn’t room to present lots of information at once. 1.0 Home Page Navigation -­‐ On the home page a sub-­‐navigation exists which divides the web site users into two groups, new students and returning students. This guides the different types of users to the information they need from the website. This can be an effective design philosophy for a desktop site but is more difficult to accomplish with a mobile site. The philosophy, as implemented by this site, is also focused on delivering information as opposed to allowing the user to accomplish a task. 1.1 Contact Us link -­‐ The Contact Us link hold a position of importance near the top of the site navigation. However, it is not in the traditional spot at the bottom of the main navigation. This may make it more difficult for the user to find this information, the site designers will want to consider moving it to the tradition spot in the navigation. The Contact section of the site delivers contact and location information in a traditional desktop format. A mobile centric model of a contact page will be explored in the mobile wireframes. 1.2 How to Register -­‐ This item in the navigation suggests that a transaction may be possible (registration) but still puts emphasis on delivering the information (by adding the How to.) In the subsequent two wireframes this paper will drill down into his section and examine how this information is delivered and then explore a mobile approach in the proposed mobile wireframes. 2.2 How to Register sub navigation -­‐ these navigation items offer information in the order a student (especially a new student) will need them (registration package, intake information, and transition programming information.) The third link to transition programming is only relevant to students coming into first year and doesn't have anything to do with registration. This link should be moved to another section of the site (a transition programming section where the Moving Forward program and Peer Mentoring existed.) 2.3 Register with Accessibility Services in Three Steps -­‐ The approach of giving a short series of easy to read and easy to follow instructions is seen throughout the Accessibility Services web site. This increases the usability and accessibility of the site. A mobile site will have to take a different approach to accomplish a more transnational user experience. Instead of learning how to do a task the user will have accomplished the task (where possible.) 6
2.4 You Can Register with Accessibility Services at Any Time -­‐ In contrast to informing the user that they can register at any time a mobile site should just allow them to register at any time. The author of this section intended to indicate that registration can happen at any time in the school year, or any time in a students academic career. To a mobile user any time means any time of day or night. 3.3 Registration Packages and Documentation Requirements -­‐ the style of a short list instructions is followed here creating consistency. 3.4 List of registration packages by disability -­‐ This list of PDFs is intended to allow the user to download the appropriate package and them fill it out (by printing it out or using the typewriter function in Adobe Reader.) Submission is then accomplished by fax, in person or by email. This process falls short of the expectations of a typical user who expects to be able to fill out the form in the context of the site. These PDFs are also inaccessible to users who are using assistive/adaptive technology (a user base very important to this organization.) This is doubly important for mobile users who would have great difficulty filling in the PDF due to the size of their screen, assuming they had software on their device that allowed them to alter the PDF. As Accessibility Services considers a mobile version of their web site it is a good opportunity to redo the organizations registration packages in an accessible manner. 7
Mobile Wireframes (4 and 5)
Carrier
12:00 PM
Carrier
Accessibility Services - University of Toronto
http://accessibility.utoronto.ca
Accessibility Services - University of Toronto
Google
http://accessibility.utoronto.ca
Accessibility Services
University of toronto
4.0
4.5
Register with Us
Google
Accessibility Services
University of toronto
5.0
4.1
12:00 PM
Registration
What type of disability do you wish to register for?
5.1
Type of Disability
5.2
Name
Test and Exam Registration
4.3
4.6
Student #
Events
Announcements
UofT Email
4.4
4.7
5.3
Volunteer Note Taking
4.2
Continue with Registration
Mentorship
Contact Us
Contact Us
5.4
Mobile Wireframes (6)
Carrier
12:00 PM
Carrier
Accessibility Services - University of Toronto
http://accessibility.utoronto.ca
Google
http://accessibility.utoronto.ca
Voice:
(555) 555-5555
Fax:
(444) 444-4444
test.address@utoronto.ca
Email:
6.2
6.3
Address and Map
List of Staff
Google
Accessibility Services
University of toronto
Contact Us
Contact Us
Front Desk
Robarts Library
6.1
http://accessibility.utoronto.ca
Google
Accessibility Services
University of toronto
Contact Us
12:00 PM
Accessibility Services - University of Toronto
Accessibility Services - University of Toronto
Accessibility Services
University of toronto
6.0
Carrier
12:00 PM
Front Desk
Robarts Library
Front Desk
Robarts Library
130 St George Street
1st Floor, Room 1140
Toronto, Ontario
M5S 3H1
6.5
6.4
Front Desk
Staff Name 2
Staff Name 3
Back
Mobile Website In this proposed design for an Accessibility Services mobile site an emphasis on transactional browsing is shown. Menu items on the home page have icons and large target areas to increase accessibility for students who have a disability that effects reading, mobility or cognitive organization. 4.0 The University of Toronto crest needs to be treated according to the organization’s (U of T) branding. (http://universityrelations.utoronto.ca/sc/u-­‐of-­‐t-­‐branding/) The crest links back to the main U of T website. 4.1 Registration has been identified as one of the most common transactions done on the Accessibility Services site . In contrast to offering instructions on how to register this options offers the user a task that can be completed. (See wireframe 5 for more information.) 4.2 The Contact Us logo and title are given prominence in the tradition spot at the bottom of the page. According to web logs the Contact Us page is the most visited page on the desktop site. (See wireframes 6 for more information) 4.3 The Events section of the mobile site should allow users to register for events and get map information for events along with the event description. This section should offer students information on events upcoming in the near/medium future. It should not be a list of all programs and services offered by Accessibility Services. 4.4 The Volunteer Note Taking site is separate from the Accessibility Services site. However, accessing this service is an important transaction for students to accomplish in a timely manner. Students should be able to log into the service and upload or download notes from mobile devices. 4.5 The Test and Exam service is also separate from the Accessibility Services site. The test registration portion of this service could be easily adapted to a mobile site and students would benefit from being able to access the service from mobile devices. 4.6 The Announcements in this section should be timely giving up to date information that is relevant to time of year (with respect to the school calendar.) 4.7 Signing up to be a mentor or mentee is a task well suited to a mobile site. 5.0 Registration should begin as soon as the user selects this option from the home page. 5.1 The Type of Disability option will bring up a picker (see 6.3) that allows the user to select which disability they need accommodated. This selection will determine which registration package they need to fill out when they continue with the registration. 10
5.2 A students name, student number and U of T email address are the common identifiers used for a student. The Repository of Student Information can verify that the three pieces of information match. The students U of T email address will be used when communicating with University. 5.3 Students can then continue with the registration (according to which disability was selected) and submit it to Accessibility Services at the end. 5.4 The Accessibility Services title acts as a back button to the home page. 6.0 The Contact Us section of the site must meet the users needs quickly and offer a complete transaction taking advantage of the mobile devices features (such as telephone and mapping.) 6.1 A mobile user will expect to be able to click on a phone number to make the call just as a desktop user expects to be able to click an email address to send a message. 6.2 The site should be able to take advantage of the mobile device’s mapping features, allowing the users to get directions from their current location. (see 6.5) 6.3 The list of Accessibility Services staff should be accessed via a picker. (6.4) 6.4 The picker containing the staff names includes pictures of the staff. This is especially useful for students who are being accommodated for a head injury as putting faces to names is often a problem. Many students who access the service infrequently will also benefit from being able to put a face to a name. 6.5 The user should be able to use their devices mapping features to see the address’ location and get directions. This becomes a useful accommodation for students with head injuries and some types on non-­‐verbal learning disabilities. Conclusion Accessibility Services continues to grow and evolve its site in terms of what information
is available on the website. In order to evolve the website in a way that will serve mobile
users in a more transactional and action based way a mobile version of the site must be
designed. Mobile users will also be working with less screen real estate. This changes
which information and how much information can be best displayed on the site making
the design of a mobile site even more practical. A mobile version of the site will serve
the growing number of students using the mobile web and a number of mobile devices
are now used as adaptive technology (by students with disabilities adding another
business driver to a mobile site design.
11