Skip to content

UI UX Best Practices

Jump to bottom
Marv Schneider edited this page Aug 5, 2014 · 5 revisions

Goals for consistent presentation and behavior

The following guidelines should provide an appealing, efficient, effective user experience.

On All Pages

  1. Every action produces recognizable visible feedback asap
  • show spinner/progress bar when retrieving data
  1. Provide a standard way to filter out Test environment objects
  • user selection becomes default on subsequent pages
  • Eventually part of ‘wallet settings’
  1. Provide a standard way to refresh the current page
  • Transition auto refresh to background load on initial page opening only one of the refresh options can be the ‘auto’ option
  • Move to a push model where the user is notified when updates are available
  • Websockets?
  1. Data persistence within the session
  • “Go Back” returns to the context that it came from - not the default results for the originating page
  • Browser Refresh button stays logged in etc..
  1. Provide a standard way to display available and reserved balances
  2. Show additional pertinent details on hover
  • example: Hover over trade offer gives popup/tooltip with relevant info. Can click for more.
  • example: History page, hover over tx or amount to see addresses (from - to)
  1. Provide a clear indication which addresses have a private key
  2. Every item with a unique id is clickable
  • e.g. every place that an address appears you should be able to click on it to get the address details page.
  1. Provide shortest path possible to perform an action on an item
  • e.g. Action menu or right-click menu on an address with dropdown menu for Send, Sell, Create property
  1. Button labels indicate there’s another page/confirmation before the action happens, e.g. Buy…, or maybe just ‘Next...’ with the final button being ‘Buy’ etc..
  2. All confirmation modals use the same style UI/UX.
  • Asset page modals seem good ‘starting point’. 4 main titles
  • Title/Action, Data to review, Confirm/Cancel Button, Feedback/Message Data after confirm
  1. Split column headings across multiple lines to reduce column width
  2. Column headings for all tables/tabular lists are always visible
  • ex: history or trade page table headings
  1. all lists are sorted in an identifiable order
  2. use pagination for lists
  3. Allow lightbox to be moved
  • Ex: Overview page see whats under the detail modal
  • Possibly Non trivial
  1. Don’t display a value (e.g. $0) for a property if there is not a published exchange rate for the property
  • e.g. in the Overview & Overview Detail, My Addresses
  • Display n/a if that’s easier than hiding the $0 value
  1. Show sending/from address in all tx lists
  • Trade/History/Pending pages
  1. Use UTC timestamps only, future settings page will let user choose display timezone
  • Still need on history page.
  • Anywhere else?
  1. Display only ~6 initial characters of transaction hash
  • hover on tx hash shows whole value
  1. Display meaningful terms for actions and data items
  • e.g. Send for Simple Send
  • History page.
  1. Numbers:
  • values greater than 999 need commas, e.g. 123,456,789
  • use a different color for decimal digits in specific cases
  • use colors for positive/negative(-) values in number fields
  • suppress trailing decimal zeros (value amounts always have 2 decimal digits)
  1. Sidebar
  • wallet functions always offered when signed in
  • indicate the page the user is in (remove link for current page, grey out the other pages (selected: #2b388f, roll over: #00acdd, off: #d0d2d3)
    • Disable the link for the current page
  • indicate future links, e.g. Bookmarks, Following (are these the same thing?)

Input fields (Validation)

  1. provide actionable error feedback as soon as it can be detected
  2. per http://unicode-table.com/en/#control-character, 0000 - 001F are control characters. They should not be accepted as text input, probably other values as well.
  • Seems already done?
  1. detect when there are insufficient, or no, available funds for a user to perform an action, and
  • include not yet confirmed transactions from the address when calculating available funds
  • provide a visual indication
  • disable actions that can’t be performed
  • provide info/link for getting needed funds
  1. for (255 Character) text fields, show # of characters remaining as user types
  2. for numeric input fields, enforce correct number of decimal places (e.g. no decimal point or decimal digits for integer values, up to 8 decimal digits for divisible properties)
  3. when user is selecting a smart property from a dropdown list:
  • sort as follows:
    • alphabetically by SP name
    • then in numerical property id order for instances of the same SP name
  • provide a hover tooltip with SP details to help user identify the SP he wants
Clone this wiki locally