One! Tile Redesign
17
University Information Technology Services One! Search. Click. Done. Tile Redesign Deepak Bhagchandani
-
Upload
deepak-bhagchandani -
Category
Design
-
view
726 -
download
0
description
Transcript of One! Tile Redesign
University Information Technology ServicesOne! Search. Click. Done.
Tile Redesign
Deepak Bhagchandani
The Ask
Design the tiles in a horizontal layout to primarily solve the problem of tile details being cut off in a vertical layout.
Additionally explore arranging and/or adding other information to the tile.
Design a horizontal layout
Old Tile
Insufficient space for fitting large titles
Extra large Icon
No clear call to action
Due to the vertical nature of the tile, some tile information might get cut off.
When the user hovers on the tile there is no clear visual feedback to provide assurance to the user of their actions. User is not clear whether he/she should click on the title or on “View Details”.
The Icons on the tiles are too large in proportion to the title of the tile and the tile in itself.
Ex. Large titles like Software downloads (IUware) get cut off to Software downloads.
New Tile
Normal state
On Hover
IconDescription
Title
RatingCampus Location
Size: The size of the icon is large, but at the same time well proportioned in relation to the size of the entire tile.
Style: The icon has a slight gradient from light to dark to enhance the current “App Store” experience.
The description provides a nice way for users to find out more information without first having to click on View Options or having to Start the app itself.
The title is in a different and darker font so as to set it apart from everything else. While browsing the different tiles, its easier for a person’s eyes to see the title first and then see the supplementary information later, as the title stands out.
The rating is located in such a way that when a person is reading the title of the tile, it will be in his/her peripheral vision but will not interfere with the contents of the tile.
The campus location label is light grey so that it does not catch the user’s eye before they read the title of the slide.
It is also of a bigger font size than the description so that its easily scanned by someone looking for a particular location.
LockThe lock icon is conveniently located on the top right hand corner so that it subtly makes it clear at first glance that this tile/app requires login.
StartOn hovering over the tile, the user will be able to see the Start button replace the ratings. This will provide a clear call to action for the user after they finish reading the title and the description.
View DetailsThe user can click on View Details to go to the details page, to see more information about the particular tile. The View Details link replaces the Campus location label.
On Hover
Drop ShadowA drop shadow on hovering, provides a visual feedback to the user and enhances the focus on the tile over which the mouse cursor is placed.
GroupedTiles
NewExperience
Tile descriptionsOn-hover call to action
Styling of Tile iconsPlacing of ratings and lock
The new experience allows for a smoother flow of user interactions,enabling a person to visit the website and quickly perform their requiredtasks without any confusion.
It also aims to create a stronger app store experience.
FutureStrategies
When a user clicks on ‘View Details’, he/she should see the additional details by expanding the tile itself rather than opening a new page.
This will further smoothen the flow of the website as experienced by the user.
Thank you
Jason BarnettJeremy R Hopf
Brian Joseph McGough
