(Floe) UI Options Design Wireframes, C.1
Former user (Deleted)
James Yoon
Mhairi Robertson
Top Panel Version
Download PDF
- call to action button on the top
- panel open horizontal pushing page content down
- initial panel displays presets only, presets take up a container of the same size filling the available width, user can scroll to see more
- presets offer either a primary adjuster and/or an on/off switch
- presets reflect common options
- one preset modified site instantly updates, but panel is not effected
- one preset modified and panel closed the adjusted preset effects the uio tab
- one preset modified and panel reopened panel is effected to reflect the modified preset
- second preset modified
- turning on a preset gives a good default preference that can be further customized using the primary adjuster,
- site instantly updates
- second preset modified and panel closed the adjusted preset effects the uio tab
- second preset modified and panel reopened panel is effected to reflect the modified presets
- uio is disabled
- site changes to original design but uio panel does not
- presets are faded out
- message appears showing how to enable uio again
- entering expand view on hover over more options draggable cursor appears
- expanded view panel - common options button can either be clicked or dragged, dragging snaps at least the minimum required height for expanded view
- filters appear on the top (tabbed view between common options and all preferences, search bar, and resets to default button)
- if room available all presets appear without scroll bar
- hovering over activated preset gives option to further customize
- customizing preset
- related preferences appear below
- not all are necessarily activated
- presets preferences displace others, scrollbar appears if necessary
- searching presets
- presets with related terms are highlighted
- more specific searches are suggested if available which will narrow the highlighted presets
- searching all preferences
- only related preferences are revealed
- clicking 'x' clears search terms
- expanded view - all preferences (categories filter)
- preferences are grouped under functional categories
- activated preferences show 'check' icon
- all preferences (most popular filter)
- list of all preferences with the more popular ones on top
- preferences can be expanded or collapsed
- all preferences one preferences expanded preference expanded displaces others
- all preferences all expanded
- all preferences negative search
- message show term is unable to be found
- request could be send
- related terms are suggested
- responsive layout of expanded view
- most navigation and filters are reduced to icons with tooltips
- columns are reduced
- customizing preset and scrolling done customizing button sticks to the top
- reseting to default gives message to undo
- responsive layout smaller less columns
- responsive layout larger more colums
Side Panel Version
Download PDF
- call to action button on the top
- panel open vertical overlapping page content
- initial panel displays presets only, presets take up a container of the same size filling the available width, user can scroll to see more
- all presets must be activated before primary adjust is revealed
- presets reflect common options
- one preset modified preset is first activated, primary adjuster can be further changed, site instantly updates, but panel is not effected
- one preset modified and panel closed the adjusted preset effects the uio tab
- one preset modified and panel reopened, second preset activated with good default, panel is effected to reflect the last modified preset
- second preset primary adjuster modified site instantly updates
- "
- second preset modified and panel closed the adjusted preset effects the uio tab
- second preset modified and panel reopened panel is effected to reflect the modified presets
- uio is disabled
- site changes to original design but uio panel does not
- presets are faded out
- message appears showing how to enable uio again
- entering expand view fullscreen through button on top labeled 'advanced'
- expanded view panel
- interaction instructions displayed in the area to the right
- filters appear on the top (tabbed view between common options and all preferences, search bar, and resets to default button)
- activated presets gives customizing options
- customizing preset
- related preferences appear on the area to the right
- not all shown preferences are necessarily activated
- 'customizing' changes to 'done customizing'
- searching presets
- presets and preferences on right with related terms are highlighted
- searching all preferences
- only related preferences are revealed
- clicking 'x' clears search terms
- expanded view - all preferences (categories filter)
- preferences are grouped under functional categories
- activated preferences show 'check' icon
- all preferences (most popular filter)
- list of all preferences with the more popular ones on top
- preferences can be expanded or collapsed, '+/-' appears on hover
- all preferences one preferences expanded preference expanded displaces others, can be collapsed with '-'
- all preferences all expanded
- responsive layout small same
- responsive layout wide same
Mobile Version
Download PDF
- revealing call to action uio button show on the bottom on initial load or when user scrolls page
- "
- "
- open panel initial screen show interaction instructions
- accessing preset mobile version is only preset focused, user swipes up to get to next preset
- preset: size
- user can either user primary adjuster or use gestures with uio opened or closed
- content instantly reflects adjusted preset, but uio panel remains unchangedÂ
- closing panel panel tab is effected once closed
- reopening panel panel layout is effected from preset once reopened
- preset: contrast user can swipe through to desired contrast theme
- page content is effected
- uio tab effected on close
- on reopen uio panel is effected
- preset: show subtitles activated with 'on/off' switch
- entering preferred language brings up keyboards and suggestions as user types
- preset: highlight activated with 'on/off' switch, user can swipe to desired highlight colour
Preference explorations
Download PDF
{"serverDuration": 14, "requestCorrelationId": "a0e7ae5a40d44bb48e2ed7df9a34afc6"}