(Floe) UI Options Design Wireframes, C.1

Owned by Joanna Vass
Last updated: Apr 03, 2013Version comment
4 min read

Top Panel Version

Download PDF

  1. call to action button on the top
  2. panel open horizontal pushing page content down
    1. initial panel displays presets only, presets take up a container of the same size filling the available width, user can scroll to see more
    2. presets offer either a primary adjuster and/or an on/off switch
    3. presets reflect common options
  3. one preset modified site instantly updates, but panel is not effected
  4. one preset modified and panel closed the adjusted preset effects the uio tab
  5. one preset modified and panel reopened panel is effected to reflect the modified preset
  6. second preset modified
    1. turning on a preset gives a good default preference that can be further customized using the primary adjuster,
    2. site instantly updates
  7. second preset modified and panel closed the adjusted preset effects the uio tab
  8. second preset modified and panel reopened panel is effected to reflect the modified presets
  9. uio is disabled
    1. site changes to original design but uio panel does not
    2. presets are faded out
    3. message appears showing how to enable uio again
  10. entering expand view on hover over more options draggable cursor appears
  11. expanded view panel - common options button can either be clicked or dragged, dragging snaps at least the minimum required height for expanded view
    1. filters appear on the top (tabbed view between common options and all preferences, search bar, and resets to default button)
    2. if room available all presets appear without scroll bar
    3. hovering over activated preset gives option to further customize
  12. customizing preset
    1. related preferences appear below
    2. not all are necessarily activated
    3. presets preferences displace others, scrollbar appears if necessary
  13. searching presets
    1. presets with related terms are highlighted
    2. more specific searches are suggested if available which will narrow the highlighted presets
  14. searching all preferences
    1. only related preferences are revealed
    2. clicking 'x' clears search terms
  15. expanded view - all preferences (categories filter)
    1. preferences are grouped under functional categories
    2. activated preferences show 'check' icon
  16. all preferences (most popular filter)
    1. list of all preferences with the more popular ones on top
    2. preferences can be expanded or collapsed
  17. all preferences one preferences expanded preference expanded displaces others
  18. all preferences all expanded
  19. all preferences negative search
    1. message show term is unable to be found
    2. request could be send
    3. related terms are suggested
  20. responsive layout of expanded view
    1. most navigation and filters are reduced to icons with tooltips
    2. columns are reduced
  21. customizing preset and scrolling done customizing button sticks to the top
  22. reseting to default gives message to undo
  23. responsive layout smaller less columns
  24. responsive layout larger more colums

Side Panel Version

Download PDF

  1. call to action button on the top
  2. panel open vertical overlapping page content
    1. initial panel displays presets only, presets take up a container of the same size filling the available width, user can scroll to see more
    2. all presets must be activated before primary adjust is revealed
    3. presets reflect common options
  3. one preset modified preset is first activated, primary adjuster can be further changed, site instantly updates, but panel is not effected
  4. one preset modified and panel closed the adjusted preset effects the uio tab
  5. one preset modified and panel reopened, second preset activated with good default, panel is effected to reflect the last modified preset
  6. second preset primary adjuster modified site instantly updates
  7. "
  8. second preset modified and panel closed the adjusted preset effects the uio tab
  9. second preset modified and panel reopened panel is effected to reflect the modified presets
  10. uio is disabled
    1. site changes to original design but uio panel does not
    2. presets are faded out
    3. message appears showing how to enable uio again
  11. entering expand view fullscreen through button on top labeled 'advanced'
  12. expanded view panel
    1. interaction instructions displayed in the area to the right
    2. filters appear on the top (tabbed view between common options and all preferences, search bar, and resets to default button)
    3. activated presets gives customizing options
  13. customizing preset
    1. related preferences appear on the area to the right
    2. not all shown preferences are necessarily activated
    3. 'customizing' changes to 'done customizing'
  14. searching presets
    1. presets and preferences on right with related terms are highlighted
  15. searching all preferences
    1. only related preferences are revealed
    2. clicking 'x' clears search terms
  16. expanded view - all preferences (categories filter)
    1. preferences are grouped under functional categories
    2. activated preferences show 'check' icon
  17. all preferences (most popular filter)
    1. list of all preferences with the more popular ones on top
    2. preferences can be expanded or collapsed, '+/-' appears on hover
  18. all preferences one preferences expanded preference expanded displaces others, can be collapsed with '-'
  19. all preferences all expanded
  20. responsive layout small same
  21. responsive layout wide same

Mobile Version

Download PDF

  1. revealing call to action uio button show on the bottom on initial load or when user scrolls page
  2. "
  3. "
  4. open panel initial screen show interaction instructions
  5. accessing preset mobile version is only preset focused, user swipes up to get to next preset
  6. preset: size
    1. user can either user primary adjuster or use gestures with uio opened or closed
    2. content instantly reflects adjusted preset, but uio panel remains unchanged 
  7. closing panel panel tab is effected once closed
  8. reopening panel panel layout is effected from preset once reopened
  9. preset: contrast user can swipe through to desired contrast theme
  10. page content is effected
  11. uio tab effected on close
  12. on reopen uio panel is effected
  13. preset: show subtitles activated with 'on/off' switch
  14. entering preferred language brings up keyboards and suggestions as user types
  15. preset: highlight activated with 'on/off' switch, user can swipe to desired highlight colour

Preference explorations

Download PDF