Skip to end of metadata
Go to start of metadata

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

  • No labels