Devices Used in Online Courses

Transcription

1 Devices Used in Online Courses A web-based animated infographic Phil Schanely MFA Portfolio Process Book Savannah College of Art & Design

2 Contents Overview 3 Research and Planning 4 Data Collection 4 Sketches 5 Storyboards 6 Design 11 Static Prototypes 11 Execution 12 Analysis 13 Final Solution 14

3 Overview This project challenged me to present data in a visual form as well as to push my front-end skills to create a web-based animated infographic. In a course on visualizing ideas and rapid concept development I was challenged to present an infographic to help share data on a certain topic. I was curious to explore how analytics data could be used to better create responsive web designs for another project and found, related to this, that devices used also can say something about a website s audience and usage patterns. An area I had direct access to was data from a webserver that hosted online courses for Cedarville University and a course website system I helped to build in a previous job. We often talk about designing for our audience, and responsive web design is stressed in the field, but what would the data actually say about our users? How many different devices are actually used? Which devices are used the most? Does the day and time devices are used say something unique about our users? With these questions in mind, I gathered my data and started the analysis towards creating graphics that could communicate what I found. I also planned to deliver the infographic as a web-based animated webpage in order to also experiment with animation on the web. Overview 3

4 Research and Planning Data Collection Tracking user sessions on a webserver that hosts Cedarville University s online course websites from the first day of class (Monday, August 25) to the midterm (Sunday, October 19), the following general observations could be made: The server recorded 37,155 sessions over the 8 weeks courses were in session. That s an average of 4,644 sessions per week, 663 sessions per day. The busiest day of the week was Sunday, which accounted for 22.22% of all sessions. The closest runner-up was Saturdays, which accounted for 13.87% of all sessions. However, on both the ipad and iphone sizes, Tuesdays saw a higher percentage of usage than other days of the week on the same devices. Week 1 was the busiest week, accounting for 15.07% of the total sessions and each week that followed saw a decrease in sessions. However, the ipad and iphone sizes saw a slight increase in access during the 8th week whereas other devices continued to decrease in session count. 197 different devices were used during this time period. 23 of these devices were used in both portrait and landscape orientation. 27 distinct devices were used in portrait orientation. The top 4 devices were desktop/laptop sizes and account for 68% of sessions. The ipad size was the 5th-most-frequently used device and accounts for 6% of sessions (when both landscape and portrait sessions are combined). The iphone size was the 8th-most-frequently used device and accounts for 3% of sessions (when iphone 4 and 5 sizes are combined). Interestingly, no sessions occurred in which the user used this device in landscape orientation. Research and Planning 4

5 Phil Schanely DMGT 706 Sketches With some sense of the stories that could be told by the data I began to envision ways to display the data. Phil Schanely DMGT 706 Phil Schanely DMGT 706 Research and Planning 5

6 Storyboards In order to plan how the animated webpage could work I created an extensive set of storyboards. Research and Planning 6

7 Research and Planning 7

8 Research and Planning 8

9 Research and Planning 9

10 Research and Planning 10

11 Phil Schanely DMGT Fall Google Analytics tracked user sessions on a webserver that hosts online courses for Cedarville University. The charts below show data related to the users in the courses and the size of devices that accessed the course websites for 8 weeks during the Fall Semester of ,323 seats were filled 19% Dual Enrollment/ 21% non-traditional High School students or graduate students 60% traditional undergraduate students 5,000+ sessions each 1,000-4,999 sessions each sessions each 6-99 sessions each 1-5 sessions each Examples of benchmark devices from the set include: 6.07% 30.70% 7.85% 4.62% 10.02% 0.01% 1.84% 0.003% 320x x x x x x x x2250 The ratio of sessions for each group from above is shown below % 29.58% 99 online sections were offered 26 sections offered to 73 sections offered to undergraduate students graduate students 62% of capacity filled by traditional students 54% of capacity filled 19% of capacity filled by Dual Enrollment students That s and average of: 28 sessions per seat 663 sessions per day 375 sessions per course Each item below represents a size of device with 1 or more sessions % 5.65% 0.69% The span of device sizes included in each group is shown below. Aggregating session count by days of the week the following can be observed: 25 Logically, device usage peaked on 20 Sundays when most classes had assignments due. 15 For most devices, Thursday was the 10 second-most-frequent day. On sessions from mobile devices similar 5 to ipad and iphone in size, a greater percentage accessed the courses 0 Mon Tue Wed Thu Fri Sat Sun during the first few days of the week. % of all sessions % of sessions from mobile devices Looking at device groups and seat demographics, the following distribution can be seen: 6% 13% 21% 33% 14% 17% 20% 22% 61% 64% 63% 66% % from graduate sections % from undergraduate sections % from undergraduate sections that with only traditional students include Dual Enrollment Data collected from Google Analytics and Cedarville University rosters through intranet services. Design Static Prototypes First I built a printable poster version of the infographic. This was a first attempt to represent the data in visual form and also provided a set of reusable assets from which I would work in the interactive/animated version. Top half, larger Phil Schanely DMGT Fall Online Courses and Devices Google Analytics tracked user sessions on a webserver that hosts online courses for Cedarville University. The charts below show data related to the users in the courses and the size of devices that accessed the course websites for 8 weeks during the Fall Semester of ,323 seats were filled 19% Dual Enrollment/ High School students 21% non-traditional or graduate students 60% traditional undergraduate students Diversity of Devices 99 online sections were offered 26 sections offered to graduate students 54% of capacity filled 73 sections offered to undergraduate students 62% of capacity filled by traditional students 19% of capacity filled by Dual Enrollment students Google recorded 37,155 sessions in 8 weeks That s and average of: 663 sessions per day 375 sessions per course 28 sessions per seat Each item below represents a size of device with 1 or more sessions. 1,000-4,999 sessions each sessions each 6-99 sessions each 5,000+ sessions each 1-5 sessions each Examples of benchmark devices from the set include: 6.07% 30.70% 7.85% 4.62% 10.02% 0.01% 1.84% Bottom 320x338 half, 320x568larger 768x x x x x1080 Ratio of Sessions The ratio of sessions for each group from above is shown below % 29.58% Daily Usage % 5.65% 0.69% Ratio of Device Sizes The span of device sizes included in each group is shown below % 4000x2250 Aggregating session count by days of the week the following can be observed: Mon Tue Wed Thu Fri Sat Sun % of all sessions % of sessions from mobile devices Logically, device usage peaked on Sundays when most classes had assignments due. For most devices, Thursday was the second-most-frequent day. On sessions from mobile devices similar to ipad and iphone in size, a greater percentage accessed the courses during the first few days of the week. Full poster Devices and Seat Demographics Looking at device groups and seat demographics, the following distribution can be seen: Online Courses and Devices 13% 21% 6% 33% 14% 22% 17% 20% Google recorded 37,155 sessions in 8 weeks Diversity of Devices 66% 61% 64% 63% % from graduate sections % from undergraduate sections with only traditional students % from undergraduate sections that include Dual Enrollment 1,000-4,999 sessions each sessions each 6-99 sessions each 5,000+ sessions each 1-5 sessions each Ratio of Sessions Ratio of Device Sizes Examples of benchmark devices from the set include: 0.01% 1.84% 6.07% 30.70% 7.85% 4.62% 10.02% 0.003% Data collected from Google Analytics and Cedarville University rosters through intranet services. Daily Usage 320x x x x x x x x2250 Design Devices and Seat Demographics Ratio of Sessions The ratio of sessions for each group from above is shown below % 29.58% 13.72% Ratio of Device Sizes The span of device sizes included in each group is shown below %

12 Execution To build out the interactive version of the infographic I used semantic HTML and CSS with jquery. I integrated SVG graphics for scalable animations and increased control with CSS. Excerpts from some of my code are shown here. jquery with custom scene-based setup for each build stage. Simple HTML with SVG graphics as PHP includes. LESS CSS organized by scene. Design 12

13 Analysis This was a truly satisfying project as it both challenged my ability to communicate complex data visually and to do so in an engaging way using current web technologies. On the data visualization side I had the concept early on to depict that vast diversity of devices that were used to access course content. I imagined all the devices laid out to scale in an almost-overwhelming grid. But I also wanted to give some sense of which devices were used most often. Experimenting with this facet proved challenging, but the end was rewarding. As can be seen in the finished comps, I landed on using variations in hue and transparency to depict this, with frequently-used devices in full color, infrequently used devices almost transparent, and those in between scaled appropriately. Even so, the system is imperfect, since there was such an extreme dropoff after the most popular few devices. In terms of execution, this was a first attempt to work with animated SVG and CSS together. I found an ongoing challenge to keep a clean separation of presentation and functionality, trying hard to keep as much visual control in CSS as possible, resorting only to JavaScript when it was best or simplest. I learned a lot about the interrelationship between these, and they all came to a head with the SVG graphics I used. With these, some JavaScript was needed to enable CSS manipulation and animation, but I was surprised how much I could control with CSS. I m rarely one to shy away from complexity, but also thoroughly enjoyed the challenge to condense thick data as well as to impose semantic and modular order on what could have been a very chaotic execution. Analysis 13

14 Final Solution The final solution is best seen in live form here: Final Solution 14