(Floe) UI Options Design Wireframes, C.1

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

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