(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
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
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