-
Notifications
You must be signed in to change notification settings - Fork 0
/
ylpl.html
104 lines (104 loc) · 12.5 KB
/
ylpl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"/>
<title>Yorba Linda Public Library - Case Study</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="title">
<h1 class="title__title"><a class="title__title--link" href = "index.html">Alexis Raya</a></h1>
<h2>Art and Design</h2>
</div>
<div class = "mobile-nav">
<button class="mobile-nav__button js-nav-button">
<img class="mobile-nav__button--img" src = "assets/images/Menu.png" alt="Menu">
</button>
<nav class="mobile-nav__menu mobile-menu--closed menu js-nav-menu">
<a class="mobile-nav__menu__link menu__link" href="case-studies.html">Case Studies</a>
<!-- <a class="menu__link">About Me</a> -->
<a class="mobile-nav__menu__link menu__link" href="creative.html">Creative</a>
</nav>
</div>
<div class = "reg-nav">
<nav class="reg-nav__menu menu">
<a class="menu__link" href="case-studies.html">Case Studies</a>
<!-- <a class="menu__link">About Me</a> -->
<a class="menu__link" href="creative.html">Creative</a>
</nav>
</div>
</header>
<main>
<div class = "project-wrapper">
<div class = "project-title">
<h3 class = "project-title__title">Yorba Linda Library</h3>
<h4 class = "project-title__subtitle">Web Design and Dev</h4>
<!-- <h5 class = "project-title__link">View the GitHub repository <a href="https://github.com/alexisraya/idm222-aar335">here</a>!</h5> -->
</div>
<div class = "project-section">
<h5 class = "project-section__title">Intro</h5>
<p class = "project-section__text">The Yorba Linda Public Library has undergone many changes during the pandemic. Mostly notably, the library transitioned to a new and updated location in 2020 through a project that cost $51 million dollars (Yorba Linda City Council). Despite this large change, the library can proudly say that it has never failed to serve its community to its best abilities (Lixey). The library is a study space, a place of learning, creativity, and a place where people, ranging from children to seniors, can come together to create a unique community. Even with the improvements that the library has made and its effort to stay open throughout the pandemic, there are still some features that can be improved to accommodate the constraints of these times. Through observations and by speaking to the staff, three main improvements were found that can be made. These improvements focus around library patrons understanding when their books have been returned, optimizing their calendar, and having librarians understand when users have turned in their books.</p>
</div>
<div class = "project-section">
<h5 class = "project-section__title">The User</h5>
<p class = "project-section__text">The user-base of this library consists of people as young as preschool children to the elderly. The spread of users’ ages in this range is pretty even, with the exception of a lack of middle school students. This aligns with the general population of Yorba Linda since roughly 23% of the adult population are seniors and 19% of the Yorba Linda population are children (Salvado). Additionally, there has been less of a digital divide amongst younger children and seniors especially since the district issued computers to all students for distance learning.</p>
</div>
<div class = "project-section">
<h5 class = "project-section__title">Focus</h5>
<p class = "project-section__text">The main emotional and action process that will be focused on will be when a user borrows and returns a book. As illustrated in Figure 1, to start this process, the user starts browsing the material either online or in person. If they are browsing online, they have the option to reserve their materials so they can pick it up at a later time. After they’ve reserved the material, then they must go to the library, retrieve their material, and check out via the self kiosks next to where the reserved material is placed. If the user is browsing in person they simply just have to check out in one of the personal kiosks placed throughout the library. Once the user is done with their material, then they can only return it at the drive-up drop off bins (Figure 2) located outside the library. However, they must return their materials two days earlier than their stated return date so that the materials can be quarantined for two days before being processed by the librarians.</p>
<div class = "project-section__image">
<!-- <img class = "project-section__image-picture"/> -->
</div>
<div class = "project-section__image">
<!-- <img class = "project-section__image-picture"/> -->
</div>
</div>
<div class = "project-section">
<h5 class = "project-section__title">Issues and Pain Points</h5>
<p class = "project-section__text">One of the main issues with this process is the lack of understanding if the user has properly turned in their library materials. With the policy of turning in materials two days later than the stated due date so that they can be quarantined, there’s a lot of grey area and confusion that can occur within the user in the effort to complete their goal. This can halt three of their seven fundamental questions of action- What happened when they placed the material in the drop off bin? What does that mean? Are their materials now considered and registered as being returned? Have they accomplished the goal of returning their material?. Without these questions being answered for two days, this challenges the characteristic of understanding that comes with quality design.</p>
<p class = "project-section__text">This two day period also has a lot of room for error. The user can potentially be overcharged on late fees if they return the material the day before or the day of their due date. There is no way to reverse this error after it has already been made. The question becomes how can this error be treated and prevented?</p>
<p class = "project-section__text">Another consequence of this system is the lack of understanding for library staff to know and understand when users have turned in their books. At the end of each day, a staff member empties out the return bins and places the material in a room where they quarantine for two days. After that quarantine period, then the staff is able to check the books back into the library. Just like the issue regarding a lack of understanding amongst the library’s patrons, the staff doesn’t know which books have been returned until after the quarantine period. This can result in them making the error of charging a patron for late fees, which can be detrimental to the library and the patrons and cause frustration. This grey area of which materials are available and which aren’t available makes the overall information of the library less discoverable.</p>
<p class = "project-section__text">One of the final issues that was discovered during the research process regarded the calendar on the library’s website. As shown in Figure 3, the calendar does a great job in informing the user as to what events are available. However, one aspect that is confusing is the color system. It is unclear why events go to specific colors. Additionally, there is a hover state microinteraction that merely fills the event area with color. If a user were to click on the title of the event, then the area would become larger and contain information about the event including its category. However, if the user slips and clicks anywhere else inside of the area, they are directed to the calendar’s webpage. This can be frustrating, especially as more events become available and users will be more inclined to use the calendar.</p>
<div class = "project-section__image">
<picture>
<source media="(min-width: 1200px)" srcset="assets/images/case_studies/YLPL/Figure3-Large.jpg" />
<source media="(min-width: 700px)" srcset="assets/images/case_studies/YLPL/Figure3-Medium.jpg" />
<source media="(min-width: 0px)" srcset="assets/images/case_studies/YLPL/Figure3-Small.jpg" />
<!-- Default image -->
<img class = "projects__project__image--img" src="assets/images/case_studies/YLPL/Figure3-Medium.jpg">
</picture>
</div>
</div>
<div class = "project-section">
<h5 class = "project-section__title">Changes</h5>
<p class = "project-section__text">As Don Norman says, errors shouldn’t be blamed on the user but rather on the design (Norman). Because of that, there are two suggested changes that can be made in order to solve the issue of lack of understanding, errors, and slips amongst users and library staff over the return system and the errors that can occur with the calendar. One change that can be made would be to add a check-in scanner to all the drop off boxes. As illustrated in Figure 4, the user would just have to scan their library card and then scan their materials before placing them in the bin. Although this does slow their return process, it ultimately helps in solving the three unanswered fundamental questions of action along with affirming them that they have completed their action. This also allows the user to not make the error of not following the suggestion of turning in books two days before the stated due date. They could now turn it in on the due day and avoid the mistake altogether. Additionally, since the scanner would be able to record that the user has returned their material, this would also aid in the lack of understanding and error that can occur amongst librarians. After the user uses the scanner and returns their materials, the system can record it for the library staff and notify them of the return.</p>
<div class = "project-section__image">
<!-- <img class = "project-section__image-picture"/> -->
</div>
<p class = "project-section__text">The other change that can be made in order to help in avoiding the slip that can occur when using the calendar would be to utilize the hover state microinteraction. As demonstrated by Figure 5, if the user hovers over the event, it would trigger a microinteraction that would reveal more information about the event such as the location and what department it’s geared towards. This would make it so that the user can completely avoid making the slip of navigating to the full calendar webpage unintentionally.</p>
<div class = "project-section__image">
<picture>
<source media="(min-width: 1200px)" srcset="assets/images/case_studies/YLPL/Figure3-Large.jpg" />
<source media="(min-width: 700px)" srcset="assets/images/case_studies/YLPL/Figure5-Medium.jpg" />
<source media="(min-width: 0px)" srcset="assets/images/case_studies/YLPL/Figure5-Small.jpg" />
<!-- Default image -->
<img class = "projects__project__image--img" src="assets/images/case_studies/YLPL/Figure5-Medium.jpg">
</picture>
</div>
<p class = "project-section__text">It is evident that these changes would take time, energy, and money. However, these changes can most likely be done without going over the $600,000 budget allotted to the library (Yorba Linda City Council). These changes would be highly beneficial in the human experience of the library by increasing understandability, aiding in answering the seven fundamental questions of action, and lessening errors and slips.</p>
</div>
</div>
</main>
<footer>
<p class="footer__text">Alexis Raya</p>
<p class="footer__text">714 - 766 - 9694</p>
<p class="footer__text">[email protected]</p>
</footer>
<script src="main.js"></script>
</body>
</html>