GoogleSmarter

PROJECT 1 Google Redux

New Concepts for Search Engine Interface

Final Solution ITGM 709 Visual Interface and Information Design Spring 2010 | Professor David Meyers

Š 2010, All Rights Reserved. Intellectual Property of Tim Putt

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

1

table of contents 3 Project Details 4 Search Smarter Strategy 5 Sketch 6 Solution 16 In Review

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

2

project details New concepts for the search engine interface Read the article entitled “Fishing for Information?

Try Better Bait” from the New York Times, Circuits Section, p. E8, August 21, 2003.

Your assignment is to redesign the Google interface. Currently, when you go to Google’s main screen and 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 user is engaged.

Pay particular attention to the section in the NY Times, article that discusses “special commands,” such as AND OR and NOT. Try to come up with a visual system that allows users to evoke these commands though 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 particular feature that you feel could be more user friendly? Is there a target audience for which you would like to design? 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 results presentation must be SCALABLE. This means you must design for searches that return no answers as well as those that return a few answers all the way to

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 may use the software of your choice and present as many screens as necessary to describe your concept. There should be 2 or more screens in your final design.

Note that in the case of indicating some action or interaction on the screen, it may be necessary to use more than one illustration to storyboard what’s going on.

Be prepared to present your idea in a group forum for critique.

Sketches for this assignment are due at the beginning of Unit 2.

Final designs are due at the beginning of Unit 3

those returning hundreds of answers.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

3

search smarter strategy While Google’s current homepage and search form is visually simple and technically rich—it is deficient when it comes to informing users regarding its robust features.

Inadvertently it blocks users from reaching the information they query by not allowing the existing tools to be readily available.

Smarter search methods exist for those who know where they are and should be available in an intuitive format for all users.

Examples of how this “selector” set would be used see next page.

By providing simple visual cues, users will be educated on advanced search features without the necessity of launching “advanced” search dialogue boxes or pages. The new navigation would not jeopardize Google’s tried and true homepage layout too much­—protecting what Google users are accustomed to.

An overly aggressive strategy to push buttons as well as a new interface on people would most likely meet great opposition.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

4

1. Shows basic search with a grayed out “+” button.

2. Shows what the hover would look like. The menu would fade in covering the right portion of the screen—with the options explained in lighter text on rollover.

3. Shows what the dialogue boxes would look like with “selectors” applied as well as the selector hover showing to create a more specialized search.

4. W ith all the selectors in place, the user can now hit enter or “Google”

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

5

Solution |

GoogleSmarter

The solution presented here is respectful of current users leniency or even downright resistance to change—however at the same time adds a smooth stepping stone to what could be a larger overhaul of the search engine appearance. GoogleSmarter uses an aesthetically pleasing interface that is simple to understand and even easier to implement.

While many of these features might be found in an “advanced” search dialogue the benefit is that you don’t have to go there to find them. “Advanced” features are used by “advanced” users and thus overwhelming for most users to bother with. GoogleSmarter takes the most used items from the advanced page and brings them within one click or keyboard shortcut away from any searcher.

The following pages are a walkthrough of how a search might be completed.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

6

The originating search is the same except for a simple “plus� symbol with a dropdown arrow indicating that there is a contextual menu.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

7

On mouse click the menu slides in without a page reload—expanding from the “+” symbol.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

8

Ideally users would learn the keystrokes to add the specific box which would in turn make GoogleSmarter used by advanced users as well.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

9

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

10

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

11

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

12

Users can select multiple search refining selectors by holding down shift to have them apply to the same field.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

13

By limiting the search too greatly—it is possible that no results will show. By “x-ing” out one or two of the modifiers the results would automatically load.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

14

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

15

in review |

GoogleSmarter

The solution may seem simple—and it is because it needs to be this way. The goal was to visually provide cues for the everyday Google users to improve there searching capabilities. The tools of course are already there but aren’t always tapped into as they are hidden in the advanced dialogue box where people don’t bother to look. Having this solution in plain sight—as well as being simple to use—encourages the user to take advantage of more of what Google search provides. It’s a smarter way to search—GoogleSmarter.

Google Redux

ITGM 709

Visual Interface & Info Design

Spring 2010

Professor David Meyers

16