(Floe) OER Commons authoring tool styling & interactions

Also see:
> Final Designs
> Walkthrough
> 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

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

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

action	mac	windows
save	⌘S	ctrl+S
preview
undo	⌘Z	ctrl+Z
redo	⌘⇧Z	ctrl+Y
heading	⌘⇧1	ctrl+shift+1
subheading	⌘⇧2	ctrl+shift+2
paragraph	⌘⇧3	ctrl+shift+3
bullet list	⌘⇧4	ctrl+shift+4
numbered list	⌘⇧5	ctrl+shift+5
increase indent	⌘]	ctrl+]
decrease indent	⌘[	ctrl+[
table
bold	⌘B	ctrl+B
italicize	⌘I	ctrl+I
underline	⌘U	ctrl+U
text color
highlight color
link	⌘K	ctrl+K
insert media
reference
jump to toolbar
jump to content

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

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

Fluid