Grid View Proposal

Last modified by Vincent Massol on 2024/02/26 17:53

 XWiki
 Design
 Completed

Description

Grid View Proposal

Current Look

current.png

 Proposal 

  • 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

pagination5A.png

 Interaction 

Editing a field 

  • Hovering a field makes an "Edit" icon appears + associated title

editField.png

  • 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

popupDialog.png

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 

results.png

  • Date entries could be edited with a calendar popup selector

 Comments suggestions 

Darker item text 

  • The idea was to make users browse the results using hover and focus their attention on a specific item
  • 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)

darkerText.png

Number align-right 

If  numbers are aligned to the right the user can scan rapidly through them:

numbers.png

Also if negative-positive values have a special meaning, the folowing notation can be made:
positivenegative.png

 Pagination "outside" 

For more versions of pagination see Paginations Proposals
paginationInside.png


 

Tags:
    

Get Connected