Page 1

4

JASON OCCHIPINTI PROJECT I SOLUTION GOOGLE REDUX ITGM 709: VISUAL INTERFACE AND INFORMATION DESIGN SAVANNAH COLLEGE OF ART AND DESIGN SCAD PROFESSOR: David Meyers FALL QUARTER, 2010

3

2 1


ASSIGNMENT OVERVIEW

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.

Special Commands

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.

OTHER NOTES

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.

DUE DATES

Final designs are due at the beginning of Unit 3

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.

OBJECTIVES

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

2


INDEX PAGE (BASIC) ICON-BASED INTERFACE

The 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 Bar

Items 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 Buttons

The 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 FOOTER

Items 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/googleredux.php>.

3


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.

4


RESULTS PAGE (TOP WITH SEARCH OPTIONS) NEW RESULTS PAGE

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

RELATED KEYWORDS

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

LEFT COLUMN

The 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 CONTAINERS

Results 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.

5


RESULTS PAGE (BOTTOM WITH SEARCH OPTIONS)

6


Project 1: Google Redux  

Google Redux

Advertisement
Read more
Read more
Similar to
Popular now
Just for you