Grid View Proposal
Version 17.1 by Ecaterina Valica on 2009/04/01 13:36
Grid View Proposal
Current Look
<span id
"proposal"> Proposal </span>====
- Pagination Integrated (Top, Bottom) + Chosing how many items to be displayed
- Live Filtering
- Filter can be text input, select box or no filter at all
- Visual separation between what fields have links or editable text inside
- Highlight hovered row (providing contrast)
- Aligning methods (for better readability):
- Characters - Left
- Numbers - Right
- Date - Right
- Actions - Center
- Images - Center
- Status - Right
<span id
"interaction"> Interaction <span>==
Editing a field
- Hovering a field makes an "Edit" icon appears + associated title
- Selecting the field to be edit - a popup Dialog appears
- The dialog separates the primary action (Save) from the secondary action (Cancel)
- Alternative: In place edit
Bigger Results and Column Filters
- The values that don't fit in a field will wrap to second row (vertical-align:top)
- The empty fields will stay blank (without "-, -- , emptyvalue" values)
- The column current sorted will be displayed apropiate
- Date entries could be edited with a calendar popup selector
<span id
"suggestions"> Comments suggestions <span>==
Darker item text
The idea was to make user browse the results using hover:
- concentration on a specific item was done by providing contrast with the rest of the items (font-color + background-color)
- hovering the entries makes "editing" function easy to discover (the appearence of the edit icon)
- links were better visible (separation between what is editable and what takes you to other pages)
as