/
(Floe) OER Commons authoring tool styling & interactions

(Floe) OER Commons authoring tool styling & interactions

Dec 20, 2012

Also see:
> Final Designs
>
> Keyboard Interactions

bolded text indicates important

input fields

  • larger drop-down menus in Describe Step

  • instructions wrap in Abstract box, resizing text box disabled, text box resizes vertically automatically as end is reached

  • instructions inside learning goals input fields "Add a new learning goal", instructions inside keyword input fields "Add a new keyword"
    > new input field is added below when user starts typing

text styling

  • larger paragraph text 16pt (1.3em?)

  • sans serif subheading

  • text style naming consistency with TOC
    > header to heading
    > Sub-header to subheading

insert media

  • if user has not added a caption to the image, add a prompt saying "Please describe this image in a few words" that can be edited beside the image name

  • change checkmark image to a submit button

username

  • underline on hover

toolbar

  • text formatting buttons (bold, italicize, highlight..) should be active when nothing is selected, formatting is applied to new text following the cursor, or a word if the cursor is in the middle of a word

table of contents

  • new heading not be added until something is typed
    > Add Heading remains faded into the background until user begins typing

tab order - write step

  • OER Commons Logo

  • Click to edit title
    > when title is focused typing would begin editing the resource title
    > if there's already a title, text is inserted at the end

  • Save

  • Preview

  • username
    > after opening username menu, arrow keys allow scrolling through items

  • write, describe, submit
    > current step out of the tab-order

  • toolbar
    > arrow keys allow scrolling through buttons (side to side, in and out of a menu
    > open table menu skips squares, going straight to the input fields
    > add colours in in highlight and text-colour menus in tab order
    > pressing enter on link & footnote button, opens and put focus on menu
    > add insert media inputs to tab order
    > disabled buttons out of tab order

  • table of contents
    > cursor when heading is selected is at the end
    > when "Add Heading/Subheading" is focused, typing should begin adding the heading

  • content
    > selecting text in content area and focusing out, maintains selection
    > tabbing in and out of the content should go to the last place the cursor was on

  • next step

  • return to top

tab order - describe step

  • top order same

  • edit existing learning goals and keywords in tab order

  • deleting a learning goals, keywords, grade level, or material type, puts focus on next item

  • pressing enter on drop-down opens it

  • pressing enter on check-boxes checks/unchecks them

  • bottom order same

tab order - submit step

  • top order same

  • blue outline on focus styling of radio buttons

  • pressing enter on radio buttons selects/deselects them

  • add edit username menu in tab order

  • bottom order same

general

  • tabbing or clicking out of the menu closes it

  • toolbar keybindings on tooltips, tooltips vary depending on OS

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

HOVER STYLING

1. button
> gradient #2694D1 (bottom) to #0AB4E2 (top)
> 1pt border #2694D1
> height 20px width 70px
> drop shadow 1px 1px 0px white
> text shadow 1px 1px 0px #2694D1
> radius 3px

2. hover
> gradient #7DAF00 (bottom) to #82C800(top)
> border 1pt #7DAF00
> text shadow 1px 1px 0px #7DAF00

3. click
> gradient #82C800 (bottom) to #7DAF00 (top)
> border 1pt #7DAF00
> text colour # 478402
> text shadow 1px 1px 0px white 45% opacity

4. submit button
> width 60px

5. disabled
> 50% opacity on background and gradient, no text drop shadow

6. cancel
> gradient #999999 (bottom) to #B3B3B3 (top)
> border 1pt #999999
> text shadow 1px 1px 0px #999999
same green hover and click states on cancel buttons

1. disabled
> 50% opacity on background and gradient

2. next step button
> gradient #F2F2F2 (bottom) to #ffffff (top)
> border 1pt #CCCCCC
> drop shadow 1px 1px 0px white
> text colour #006699
> text shadow 1px 1px 0px white
> radius 3px

3. hover
> border 1pt #0AB4E2
> drop shadow 1px 1px 3px #0AB4E2 30% opacity

4. click
> border 1pt #0AB4E2
> inset drop shadow 1px 1px 10px #0AB4E2 10% opacity
> drop shadow 1px 1px 0px white

1. link
> text #0B7BA9 italic
> text shadow 1pt 1pt 0pt white

2. hover
> text #0AB4E2
> bottom border 3pt #0AB4E2

3. drop-down
> border 1pt #0AB4E2
> drop shadow 1px 1px 3px #0AB4E2 30% opacity

1. content area
> drop shadow 1px 1px 2px black 22% opacity

2. content area focused
transitions to...
> drop shadow 1px 1px 5pxblack 22% opacity

1. selected
> 1px border #0AB4E2
> radius 3px
> drop shadow 0px 0px 3px #0AB4E2 30%
> text colour #B3B3B3

2.
> bottom border 2pt dotted #FFCC00
> text colour #999999

3. hover
> background #ffffff
> text colour #999999

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

FOCUS STYLING


> border 3pt #FFCC33


focus styling on inline fields
> border 3pt #FFCC33
> background #FFFFCC 50% opacity

box
> width:75px height:40px
> background: #F2F2F2
> radius: 5px
> text: #4D4D4D
> text shadow: 1px 1px 0px #FFFFFF

current step
> background: #FFFFFF
> border: #CCCCCC
> drop shadow: 0px 0px 3px #000000 24% opacity