ITGM 709: Visual Interface and Information DesignSpring 2010

Prof. David Meyers

Project 1: Google ReduxMeg McGrath

project 1: Google Redux

New concepts for the search engine interface

Read the article entitled "Fishing for Information? Try Better Bait" from the New York Times, CircuitsSection, p. E8, August 21, 2003Your assignment is to redesign the Google interface. Currently, when you go to Google's main screenand all of its consecutive screens, you are confronted with a clean, stripped-down, verbal-based screen;your challenge is to create one that is more graphical in nature, and reflects the actions in which the useris engaged.

Pay particular attention to the section in the NY Times, article that discusses "special commands," suchas AND OR and NOT. Try to come up with a visual system that allows users to evoke these commandsthough elements that can be recognized at a glance.

Think about ways in which you and those you know use the Google search engine. Is there a particularfeature that you feel could be more user friendly? Is there a target audience for which you would like todesign? If so, then please define the audience in your initial sketches.

Your challenge is twofold:1. Design the search input screen with a submit action that makes sense within the visual system

you have created.2. Design the "results" screen, that presents the user with the results of his search in a meaningful

way. Be deliberate about how elements are arranged, and bear in mind that your resultspresentation must be SCALABLE. This means you must design for searches that return noanswers as well as those that return a few answers all the way to those returning hundreds ofanswers.

This assignment is a visual planning exercise. You will NOT be asked to program any portion of it.Do so only if you feel it enhances the presentation of your concept in a meaningful way. You mayuse the software of your choice and present as many screens as necessary to describe yourconcept. There should be 2 or more screens in your final design. Note that in the case ofindicating some action or interaction on the screen, it may be necessary to use more than oneillustration to storyboard what's going on.

interpretation: Don't fix what's not brokenBuilding on upon the Google foundation

2003, in terms of the internet, was a long time ago. A lot has transpired since the NYTimes article,required as reading for this assignment, was written. The internet has grown up in that time frame andmore importantly, internet users have trained themselves better to use technology of this kind moreeffectively.

In the first ten years of mainstream internet usage, the technology was too new - too different from othersystems - for most people to fully comprehend. Designers and users alike had to grapple with figuring outthe best ways to utilize the system. In its infancy, the internet became a digital version of many real worldsystems for interacting with information and data.

Over the 7 years since the article has been written, many wrinkles have been ironed out andstakeholders, the designers and users alike, are coming to terms with the reality that forcing digitaltechnologies, including the internet, to conform to existing mental models of real world objects was doinga disservice to all parties involved. Since that time, a new language has emerged to understand anddiscuss these types of systems and finally, software is being designed for the technology that isharnessing its true potential.

When approaching this project, I did not want to redesign the elements of Google that I believed were itsstrongest assets merely to fulfill project requirements. I went through the process of searching for variousterms, testing the various methods described in the NYTimes article and attempted to find the areas thattruly needed improvement.

One of the best features of Google is its ability to understanding what a user is searching for when theyenter a query in colloquial language instead of having to utilize the AND / OR and other special features.By default, Google assumes that when a user enters a string of terms that it should insert an AND in

between each one. If a user wants to utilize the OR feature, it will appear in the casual language theyutilize in their query. By encouraging the user to utilize this casual language with technology, it forcestechnology to adapt to users and focus on their needs rather than the preconceived notions of what ispossible when creating interactive designs. By introducing new UI elements to bring these operands tothe forefront of the user's attention, they will have to stop and think and work additionally hard to obtainthe results they seek, instead of asking the technology to do the heavy lifting on its side.

After going through the search process with a critical eye, I discovered that the part of the process thatcould actually benefit from a redesign was the way in which the user views and navigates through searchresults. I endeavored to design a way to allow the user to navigate through information without having tostop to load new pages of content, to organize the sorting according to their parameters, as well asredefine the search based on interesting new information they discover through their initial query.

concepts: Visualizing ResultsAdding depth to content

Fig 1.1 Initiating the search process

The Google homepage is simple and with good reason - Google is designed to get users to the contentthey seek as quickly and as efficiently as possible. Therefore, there is no need to try an entice them todeviate from their plans on the homepage. Google asks the user only to input their search terms andinitiate the process.

For the most part, I left this design as it currently exists, because I feel strongly that Google has made theright design decisions for aiding the user in realizing their goals.

Fig. 1.2 Visualizing Results

After a search term has been queried, the current Google system simply returns a list of results sorted bytype (ie: websites, news items, images, videos, products, etc). To interact with the content and learnmore about the item, the user must launch the result to decide if this information is what they are seekingor not.

In my proposed redesign, I suggest utilizing the z-index to place the user into the results and let themnavigate spatially. The closer a user is to a result according to the sorting method they have selected, thelarger and more in focus it will appear. By scrolling with the click wheel, moving up or down with thearrow keys, or clicking once from entry to entry, the user can move through the results cloud to learnmore about the item.

Below the search results window is related terms sorted in the same manner as the results in the windowabove. Clicking one of these options will reload the search window according to the results generated bythis new query.

Fig. 1.3 Exploring a Result

By clicking again on an item, it can be opened to show additional related items. Each of these items canbe explored or navigated to directly.

In this way, the user is able to generate related searches quickly based on a result that they believe isleading in the correct direction. By seeing a thumbnail version of the site, they are given anotherdimension of information that will help them assess whether the item is worth their time to launch andinvestigate further.

finalization: Developing a new navigationFilling in the holes

Fig. 2.1 Initiating the search

To begin, the user enters a search term using colloquial language

Fig 2.2 Receiving results

Results are represented visually with thumbnail images of the corresponding website, image, or internetpresence. They are placed along 3 axes and the closer they are to the user's position within the sortingsystem that they specified, the larger and more in focus the thumbnail will appear.

The user can navigate through space by either utilizing the scroll wheel, the up and down arrows orclicking from result to result to lock the locus of their attention on that result item.

Fig 2.3.1

Fig 2.3.2 Fig 2.3.3

Upon rolling over an item, additional information will appear over top of the result, aiding the user indeciding if they want to learn more about this result item (Fig 2.3.1).

By clicking and dragging, the user will be presented with menu items that will allow them to interact withthe selected result item. By dragging upwards toward the top of the result, the user will have the option oflaunching the selected internet item (Fig 2.3.2). By dragging downward towards the bottom of the result,they will be presented with the option of explore this content further (Fig 2.3.3).

Fig 2.4

If the user selects to explore a particular item, Google will make all the other visual search results fly awayso they clear the work space for the new content related to the selected item.

Fig 2.5.1

Fig 2.5.2 Fig 2.5.3 Fig 2.5.4

In the newly cleared workspace, the selected item opens up to reveal its related content. It organizes theinformation into different stacks that the user can choose to investigate further if desired.

Fig 2.6.1 Fig 2.6.2 Fig 2.6.3

When the user clicks and drags over these stacks of information, options to explore this new content willpopup up. Releasing with one of these options selected will populate the work space with this newinformation.

Fig 2.7

When a stack is selected, the user will be able to navigate the new content in the same spatially relatedmanner and continue to explore related content and revise their search until they find something theywish to launch to investigate in depth.

conclusion: SynthesisProcessing the process

This Google redesign attempted to improve the process of viewing search results within Google.Because this system does not use pages, instead, content is called up on demand as it moves closer to

the that information in the sorting order, it will save the user time as they will not have to wait foradditional pages of results to load. Users will have another dimension of information to help them assesswhether or not a result is worth their time to launch and investigate further by having a full thumbnail oftheir internet presence, be that of their website, image or other media. Upon selecting an item, the userwill be able to access all the related information Google can find on that item and choose to explore thatin the same manner as their initial query.

By introducing the 3rd dimension to the search results, Google would now be immersing the user in theinformation they seek, offering them a more tactile experience grounded in exploring information.

In keeping the elements of Googling that work extremely well and pushing them further to increase thecomfortability that the user experiences, this project aims to put additional pressure on current technologyto respond to user needs not technological limitations. By designing systems that respond to the ways inwhich users currently approach investigating information but presenting the data in a way that only adigital technology can, the users needs are met while technology continues to progress.