Katrina's LSC 548 Final Project

Homepage and Overview

This website is the portfolio of the skills and knowledge that I gained in LSC 548: Information Architecture and Web Site Development, as taught by Dr. Lauren Mandel in the Fall 2019 semester at the University of Rhode Island’s Graduate School of Library and Information Studies. This website displays my application of information architecture to the design of a website, my skills in building a multi-page website using HTML and CSS, and shows the skills I have acquired in JavaScript coding. I chose this elective because this was an excellent opportunity to further develop my technology skills as well as my knowledge of digital media.

In LSC 548: Information Architecture and Web Design, I have learned the concepts of Information Architecture (IA) and obtained hands-on practice through designing and building a website. The terms Information Architecture and Information Architect have several definitions; the following are two that have become my favorites. Richard Saul Wurman’s third definition of an Information Architect is, The emerging 21st century professional occupation addressing the needs of the age focused on clarity, human understanding, and the science of organization of information (as cited in Ding, Lin, & Zarro, 2017, p. 1). Ding et al. (2017) define IA in this way:

“Information architecture is about organizing and simplifying information for its intended users; designing, integrating, and aggregating information spaces to create usable systems or interfaces; creating ways for people to find, understand, exchange and man- age information; and, therefore, stay on top of information and make the right decisions. “ (Ding, Lin, & Zarro, 2017, p.3).

IA has transformed from information-centered to user-centered, and is now pervasive in many of the items that we interact with daily. Information is available through more devices than traditional computers, which website designers should account for in their designs. (Ding, et al., 2017). The Internet of Things is becoming common, and IA is apparent in their user interfaces. Ding et al. (2017) suggest that as design best practices shift to responsive web design with mobile-first prioritization, websites should adopt these practices to avoid becoming obsolete. This goes beyond screen dimensions; it also means putting awareness of the strengths and weaknesses of mobile devices at the forefront when creating library websites. Some examples are prioritizing the most important information; using buttons that have mobile friendly properties regarding size, location, and interactive features like hovering; and keeping text-entry requirements to a minimum (Ding et al., 2017). This is especially true for library websites, which face the added challenge of disintermediation, or remaining relevant and avoiding being cut from the search strategies of information seekers in an increasingly information-rich world (Adams, 2018).

IA also includes user-centered design (UCD). Creating user personas helps to identify user needs during the iterative design process, (Ding, et al., 2017). For this course, I designed and implemented a usability test, thus learning skills that I can use during my career as a librarian. I also learned about the different methods to organize information on a website, and why metadata and controlling vocabularies is a necessary part of good design practices, (Ding, et al., 2017). I was given practical experience in how treemapping can be an effective tool to visualize the information organization of a website, (An, Lin, Yu, & Zhang, 2015, as cited in Mandel, 2019).

In this course, I learned how to create this website using HTML, CSS, and JavaScript, which are three of the necessary coding languages for creating websites and apps. I also learned that another aspect of coding is computational thinking. Computational thinking is a process that uses decomposition, pattern recognition, abstraction, and algorithm design in order to solve problems. I learned that teaching computational thinking is a key part of teaching coding to patrons (Media Smart Libraries, n.d.).

To put what we learned into practice, I incorporated some of the principles that we learned in this website’s design. In order to ensure accessibility, the colors of this website were chosen to be easily viewed by those with color-deficiency. All images have alt tags, with the exception of the header/footer photo, which is purely decorative and does not convey any neccessary information; therefore I used an aria-label tag to provide an alternative description to screen readers (W3C, 2019). I also used null alt tags in my navbar because the icons and text are contained within the same a tag. Both of these alternatives are recommended by WCAG2 guideline 1.1.1 (W3C, 2019). In order to reflect contemporary style, this page, which was was created in the autumn of 2019, features colors from Pantone’s NY Fashion Week Autumn/Winter 2019/2020 color palate (Pressman, 2019). For my two new JavaScript programs, I also created a Return to Top button with JavaScript and applied it across my website, because according to Zipf’s Law, website users typically use the least amount of effort required (Ding et al., 2017). It is located on the lower right-hand side of the page, flush with the corners of the webpages, to demonstrate the principle of Fitt’s Law; that is the location is close to the scroll bar (Ding et al., 2017). My second new JavaScript program is to turn the cursor into a magnifying glass in order to better view my Treemap.
I created a horizontal navigation bar because according to Nielsen’s research on eye tracking, website users first scan from left to right across the top of a website, then follow an “F” shape to scan the remainder of the page (Nielsen, as quoted in Ding et al., 2017). This is consistent with many other websites, therefore matching the mental model that web users expect (Ding, et al., 2017). The buttons are designed to be adequately large and rectangular, to present an adequate clickable space, in accordance with Fitt’s Law. They include simple icons and text to display both implicit and explicit affordance. (Ding, et al, 2017). One of the ways that I made my website responsive is through the use of CSS to style the hanging indent of my Reference Lists; these adapt to screen width.
I hope that you enjoy exploring my website as much as I enjoyed building it!

References

Adams, R. M. Jr. (2018). Overcoming disintermediation: A call for librarians to learn to use web service APIs. Library Hi Tech, 36(1), 180-190. doi: 10.1108/LHT-03-2017-0056

Ding, W., Lin, X., & Zarro, M. (2017). Information architecture: The design and integration of information spaces (2nd ed.) [e-book version]. San Rafael, CA: Morgan & Claypool Publishers. doi 10.2200/S00755ED2V01Y201701ICR056

Mandel, L. H. (2019). Module 2 week 2 lesson: Organizing information for users [PDF document]. Retrieved from Lecture Notes https://sakai.uri.edu/x/SHIqNe

Media Smart Libraries. (n.d.). Module 3: Computational thinking and coding [online course]. Retrieved from https://learn.webjunction.org/course/view.php?id=393

Pressman, L. (2019, February 7). NY fashion week autumn/winter 2019/2020 [online article]. Retrieved from https://www.pantone.com/color-intelligence/fashion-color-trend-report/fashion-color-trend-report-new-york-autumn-winter-2019-2020

W3C Web Accessibility Initiative. (2019, Oct 09). How to meet WCAG (quick reference). Retrieved from https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0

Icons in the Navigation Bar are provided by Google.