A Basic WYSWYG Book Metadata Editor

A CRUD app to support browser-based metadata editing

(5 minutes read)

Although some librarians use web programs like Google Sheets for storing data on items like books, factors such as steep learning curve or non-familiarity with user interface can make working with such applications difficult. A simple web application for creating tables to store book data and information offers a crucial solution for ensuring faster and more accurate work outcome.

For my LIBR 556: Information Systems - Documments II course final project therefore, I sought to build a simple web application that allows information on items like books to be stored in a table form. My main focus, in building the application, was design rather than coding. In other words, I was interested in going beyond mere programming and employing valid design techniques to create a minimalist, user-friendly and interactive product. Although my work was aimed at people working with book metadata such as collections or cataloguing staff, I hoped it could be useful to other users whose daily tasks entail similar activities. Hence I thought it advisable to create a flexible and adaptable product that could accommodate different needs and requirements from different user groups.

The Design

uxhc

The User Experience Honeycomb by Peter Morville. Source: Google

The main design principle for my project was Peter Morville's User Experience Honeycomb. To this end, my focus was on ensuring that the end product would be simple, minimalist and easy-to-use. In other words, users should find the end product usable, useful, accessible, and with desirable features and functionalities they could easly implement or learn to use. As such, I used mostly common features like forms, buttons and tables in building the application. I decided to omit features like navigation bars or any form of multimedia since I felt they could be a distraction to users. Nielsen (2004) argues that web features such as navigation bars are primarily intended to support user tasks. However, with respect to my application, there was no need for such support since every tasks was intended to be performed on a single page interface and users wouldn't need to navigate between pages or between different sections of a page to complete specific tasks.

What Inspired the Design?

Overall, two main design techniques were consistent throughout my project: simplicity and ease of use. Relying on recommendations by Morville (2004), Dillon (2004) and Duarte (2008), I ensured that tasks and other actions to be performed by users would be simple, quick and easy to execute. Attempt to achieve a visual harmony for the design inspired the use of simple yet elegant color pallete and fonts. This was done per the recommendation by Duarte (2008) that using such color and font features help draw and retain user interest in the application.

Building the Application

html-css-jv

Image Source: Google

I built the application using HTML, CSS and Javascripts languages. It took the whole of the Winter 2018 Semester to do this. Since I wasn't very versed in any of the above languages prior to starting the project, I relied on course labs and personal learning via tutorials I found online, online moocs, and perhaps the most valuable resource I used, stack overflow. Naturally, being a novice, I faced quite a steep challenge. One particular challenge was trying to write a code that would allow the application to be usable on multiple devices/platforms - PC, mobile and tablets. After searching the internet a while, I came across an answer on stack overflow that allowed me to do this. Another coding challenge I faced was trying to create a feature that would allow users to send data they input into a form to a table. Again after consulting several materials I found online, I was able to piece together knowledge I'd gathered to write some decent javascript codes that allowed me to do this. The codes are shown below:

The above code allows information a user inputs into a form on the application page to be sent to a table beside the form. A user is able to input information on books such as title, name of author, its price and publisher and then click a 'Submit' button. Doing this sends the information they entered to be displayed as table beside the form

Code #2 above also allows a user to edit information displayed on the table beside the form. Clicking on the Edit link beside the data sends the information back to the form fields for the user to modify as needed. Afterwards they can send the data back to the table by hitting the Submit button

A real challenge I faced, however, was attempting to create a feature that allows the table data to be exported as .csv, .xsxl or .pdf files. I felt that the application would be incomplete if all it did was take input data and capture them in table format. I felt it would be very useful to users if they could also output or export the table data as spreadsheet or text files. I'm still trying to string up a decent javascript code to accomplish that

Testing the Application

html-css-jv

The web application: BookRecorder

I used a colleague to test the application and provide valuable feedback I could use to iterate on the design. Some of the main features he identified were simplicity and economy of space. Although he noted that these features were likely to endear the product to most users, he was concerned that some users may find the design too simple for their tastes. I am still working to develop the application further. One of my main preoccupations is trying to set up a working feature that lets the table data be exported as .csv and .xsxl files. As mentioned earlier, I don't think the application would be complete without this feature.

NB: The finished product at the time of writing may be found here.

Conclusion and Moving Forward

Working on this project has taught me a valuable lesson about putting usability above aesthetics when designing a product. Although conventional wisdom states that people see things that look better as more workable or efficient, sometimes I think it is important that aesthetics is sacrificed for usability, especially if it might get in the way of what users wish to accomplish with the application.

Works Cited

Dillon, A. (2004). Designing useable electronic text (2nd ed.). Boca Raton: CRC Press.
Duarte, N. (2008). Slide:ology: The art and science of creating great presentations. Sebastopol, CA: O’Reilly Media.
Nielsen, J. (2013). Website reading: It (sometimes) does happen. NN/g Nielsen Norman Group. retrieved from: https://www.nngroup.com/articles/website-reading/#:~:text=Summary%3A%20When%20web%20content%20helps,to%20actually%20reading%20the%20copy.
Moran, K. (2015). The Aesthetic-Usability Effect. NN/g Nielsen Norman Group. retrieved from: https://www.nngroup.com/articles/aesthetic-usability-effect/actually%20more%20effective%20or%20efficient.
Morville, P. (2004). User Experience Design. Semantic Studios. retrieved from: https://semanticstudios.com/user_experience_design