1

24

3JASON OCCHIPINTIGOOGLE REDUXITGM 709: VISUAL INTERFACE AND INFORMATION DESIGNSAVANNAH COLLEGE OF ART AND DESIGNSCAD PROFESSOR: David MeyersFALL QUARTER, 2010

PROJECT I SOLUTION

2

ASSIGNMENT OVERVIEWYour 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.

Special CommandsPay 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.

OBJECTIVES1. 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 those returning hundreds of answers.

OTHER NOTESThis 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.

DUE DATESFinal designs are due at the beginning of Unit 3

3

INDEX PAGE (BASIC)

ICON-BASED INTERFACEThe new interface has similar object and word placement as the original Google interface, however words have been replaced by easy-to-understand icons. Most of these icons conform to original Google branding established throughout the website. So there is no confusion on the meaning of the new icons, small JavaScript popups will be utilized that activate after the user hovers for more than two seconds.

Top BarItems like Gmail, Image Search, Video Search, etc. have been replaced by their corresponding Google-brand icons. Users can view even more types of searches by clicking on the button marked “...”

Search ButtonsThe search and advanced search buttons have been replaced by icon-based buttons. The word “Google” is already synonymous with the term “search,” so having a Google icon for the main search button seems only appropriate.

NEW FOOTERItems like “Advertising Programs” and “About Google” are no longer floating in negative space. This new design incorporates a web 2.0-style footer with the aforementioned items, and the new login screen. This footer was inspired by the style mentioned by author and designer Andy Ruteledge - <http://www.andyrutledge.com/google-redux.php>.

4

INDEX PAGE (SEARCH OPTIONS)

NEW “SEARCH STACK”Users can now perform advanced searches by creating a “search stack.” The search stack is created as the user clicks and drags operators (such as “and”, “or”, etc.) from a drop down menu that appears when the “Advanced Search” button is clicked. As operator buttons are dragged into the search, new fields as well as a new operator placeholder appear dynamically via JavaScript. This process is scalable, however, the user will be limited to maximum of 10-15 extra fields.

5

RESULTS PAGE (TOP WITH SEARCH OPTIONS)

NEW RESULTS PAGEUsers will also have the option of creating a scalable search stack to refine their results.

RELATED KEYWORDSTo the left of the results, related keywords appear, and are color coded with the darkest the most popular, and the lightest the least.

LEFT COLUMNThe left column under the Google logo will be left vacant in regular searches, as it will accommodate extra search refining options when users are utilizing the image or video searches.

RESULTS CONTAINERSResults are now contained within ultra-compact containers. Each container is now zebra striped (to assist in readability), as well as retractable (via the expand/retract arrows in each result). By default, the first 5-10 results will be opened for the viewer. New icons for “similar pages”, and “cached results” have also been added.

6

RESULTS PAGE (BOTTOM WITH SEARCH OPTIONS)