FP-GabriellaBrignardello-JohnMorgan-MilanDoshi

From cs448b-wiki
Jump to: navigation, search

Project Proposal

Group Members

  • Gabriella Brignardello
  • John Morgan
  • Milan Doshi

Description

One of the most prevalent ways we all view data on a day-to-day basis is through the web. However, many sites that present us with data are extremely inefficient to use, poorly formatted and organized, and are just simply awful, which in turn hampers one’s ability to understand the information these sites present. Some examples we’ve encountered ourselves include: BLS.gov and www.southandeastbayairportshuttle.com.

With our final project, we hope to create a tool that will re-visualize existing websites so users can better interact with them, navigate on them, and reorganize data to follow web design norms, which will lead to better data comprehension and a better overall experience. Fundamental design rules for websites are taught in web application classes and seen used in templated websites. We plan on learning from these design rules to implement our interface. In order to accomplish this, we plan to extract the semantic information from a website, particularly tags and information inside of them, as well as the website content. Then we will use use auto layout techniques and/or style guidelines to iteratively produce layouts with a penalty function based on the semantic information we retrieve. We are very excited about this visualization tool for “upgrading” websites as it could become something that is actually used by many on the web to improve poorly designed websites and the interactions users have with them.

Project Progress Presentation

Project Progress Report

Literature Review

The development process and functionality of our tool for re-visualizing existing websites will be building on three areas of prior work. These are: design principles for visual communication [1], automated layout techniques [2], and principles for web page usability [3].

Design Principles for Visual Communication
Agrawala, et al.’s paper [1] emphasizes the importance of following three steps when creating visualizations: (1) identifying the domain specific design principles; (2) putting these principles into use with automated visualization design systems; and (3) evaluating their effectiveness with metrics. Our project structure has been based on these three steps; we began our process by identifying a set of poorly designed sites and a set of well designed sites to establish what visualization aspects of web pages we want to focus on improving with our tool. We are also examining the most relevant related work (with this literature review). Then we will be creating our automated system that applies the design elements we have identified as most important. Lastly, we plan to conduct some user testing (as time is limited, it will not be as extensive as we would like, but we will still pursue an initial round) in addition to our own thorough testing as a means of evaluating the effectiveness of this tool.

Automated Layout Techniques
Because effective layout is one of the most important aspects of presenting information, it is necessary to explore what methods for automated layout currently exist. Lok and Feiner’s paper [2] explores specifically constraint and learning-based methods and systems where the former uses a set of preset rules or constraints to lay out the content, while the latter is trained by either an expert or the user. Our work will be more in line with the constraint-based systems described as we will be developing a set of both abstract (or relational) and spatial constraints or rules, specifically related to overall layout, navigation, and hierarchical information, that will then be applied to a web page in the redesign process through a user interface that will be used to both input a website and output the source code for the revised web page.

Principles for Web Page Usability
In Neilson’s book about web usability, he explains that “people do not come to the Web for an ‘experience,’ they come for information,” which ultimately leads him to assert two main principles on this matter: (1) web users want to find what they are looking for quickly, and (2) if they are not looking for something specifically, they want to browse quickly and access information that they come across in a logical manner. For this reason, we are focusing our redesign on several web aspects that we have identified as consistently problematic in current “bad” websites: proper display of hierarchical information, overall layout improvement, and clarifying the display of the navigation functionality. With these visual improvements, a user would be able to easily find what they are looking for and/or have a way of intuitively navigating the website and skimming for relevant information.

While our tool will be based on these principles and ideas, we plan to take our design one step further by applying these techniques simultaneously to take existing websites that use any kind of design principles and transform the elements we choose into new versions which follow what we have recognized as highly regarded principles.

References

[1] Agrawala, M., Li, W. and Berthouzoz, F., 2011. Design principles for visual communication. Communications of the ACM, 54(4), pp.60-69.
[2] Lok, S. and Feiner, S., 2001. A survey of automated layout techniques for information presentations. Proceedings of SmartGraphics, 2001.
[3] Nielsen, J., 1999. Designing web usability: The practice of simplicity. New Riders Publishing.
[4] Laja, P., 2012. 8 Effective Web Design Principles You Should Know. ConversionXL. Available at: http://conversionxl.com/8-universal-web-design-principles-you-should-to-know/ [Accessed 20 May 2016].

Project Plan

  1. Implement web parser (John & Milan)
    • Using Node.js to take in a URL and extract the DOM using Cheerio
    • Then create an alternate structure for our purposes which will give us the semantic information we need to redesign
  2. Identify design principles to focus on (Gabriella)
  3. Protocol for redesigning
    • Extract the correct information
    • Restructure DOM
    • Restyle according to guidelines
    • Don’t break functionality of existing website
  4. Redesign via principle #1: Hierarchical Information (All Team)
    • The DOM is a hierarchical model. Oftentimes, website’s create hierarchical structures but do not display these hierarchies, which makes information difficult to parse and headings impossible to distinguish.
  5. Redesign via principle #2: Overall Layout (All Team)
    • A user can more effectively view and appreciate information on a website if it is organized and/or partitioned in an aesthetically pleasing and perceptually appropriate way.
    • We plan to base our layout redesign decisions on the Golden Ratio (of “Divine Proportions”), Gestalt Design Laws, and the Rule of Thirds.
  6. Redesign via principle #3: Navigation (All Team)
    • A website’s navigation strongly affects how easily users can find and understand the information they are searching for.
    • Being able to distinguish navigation from other information is important in the same way.
  7. Design/implement UI (Gabriella)
  8. User Testing (Gabriella)
    • As time permits
    • Small scale A/B testing of existing websites vs redesigned websites
  9. Final Poster (Gabriella)
  10. Final Presentation (All team)
  11. Final Paper
    • Related Work (Gabriella)
    • Methods (All Team)
    • Results (John & Milan)
    • Discussion (John & Milan)
    • Future Work (John)

Final Deliverables

Retrieved from "http://web.stanford.edu/class/archive/cs/cs448b/cs448b.1166/cgi-bin/wiki/index.php?title=FP-GabriellaBrignardello-JohnMorgan-MilanDoshi&oldid=11837"