lcf - le proposed beta ui student-related screens

26
LCF - LE Proposed Beta UI Student-related Screens

Upload: griffin-grant

Post on 21-Jan-2016

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: LCF - LE Proposed Beta UI Student-related Screens

LCF - LE

Proposed Beta UI

Student-related Screens

Page 2: LCF - LE Proposed Beta UI Student-related Screens

Simple Design

Minimal Elements

1. Header

2. Single Toolbar

3. Content Area

Page 3: LCF - LE Proposed Beta UI Student-related Screens

1. Header

2. Toolbar

3. Content Area

Page 4: LCF - LE Proposed Beta UI Student-related Screens

Header Essential Elements

1. Avatar (64 x 64 pixels)2. Student Name3. Program Name4. ILO Code / Description5. Teacher Name6. Way for teacher to access teacher options (see next slide)7. Student Interests Indicator (frame color around avatar indicates)

8. Note: Sylvan website header art is used for decorative element

Page 5: LCF - LE Proposed Beta UI Student-related Screens

From the Student LE, a teacher needs:

1. a way to show Teacher Controls

2. a way to re-orient (turn) screen

3. an option to show answers sequentially

4. an option to show all answers

Page 6: LCF - LE Proposed Beta UI Student-related Screens

Beep

An alert sounds when Teacher Options are selected

Page 7: LCF - LE Proposed Beta UI Student-related Screens

Teacher Controls window shows when selected

Page 8: LCF - LE Proposed Beta UI Student-related Screens

Toolbar Essential Elements

1. Draw Tool2. Line Tool3. Highlight Draw Tool4. Highlight Line Tool5. Erase Tool6. Erase All Tool7. Shapes Tool8. Stamps Tool9. Color Picker10. Line Width11. Resources button12. I’m Done button

Page 9: LCF - LE Proposed Beta UI Student-related Screens

Selecting Shapes displays drop-down menu

Page 10: LCF - LE Proposed Beta UI Student-related Screens

Selecting Stamps displays drop-down menu

Page 11: LCF - LE Proposed Beta UI Student-related Screens

Selecting Colors displays

some sort of Color Picker

Page 12: LCF - LE Proposed Beta UI Student-related Screens

Selecting Line Width displays drop-down menu

Page 13: LCF - LE Proposed Beta UI Student-related Screens

Clicking Resource button displays

tabbed Resources window.

Note- button icon should match program

Page 14: LCF - LE Proposed Beta UI Student-related Screens

Clicking I’m Done button displays… ?

Idle screen?

Beep

An alert sounds when I’m Done button is clicked

Page 15: LCF - LE Proposed Beta UI Student-related Screens

My Learning

Clicking within avatar displays floating My Learning window.

Tabs include:• My Skills• My Learning Log• My Interests• My Tokens• My Character

Page 16: LCF - LE Proposed Beta UI Student-related Screens

Current and previous session progress shows along with skills mastered (gold star).

Page 17: LCF - LE Proposed Beta UI Student-related Screens

Current and previous session notes show. Notes can be entered or edited and saved.

Page 18: LCF - LE Proposed Beta UI Student-related Screens

Student interests can be entered or edited and saved.

Page 19: LCF - LE Proposed Beta UI Student-related Screens

A different colored frame around the avatar indicates to the teacher that the student has entered (and saved) interests.

Page 20: LCF - LE Proposed Beta UI Student-related Screens

Current and previous session “tokens earned” totals show.

Page 21: LCF - LE Proposed Beta UI Student-related Screens

A collection of selectable avatars.

Page 22: LCF - LE Proposed Beta UI Student-related Screens

Some possible examples of idle screen content:

Page 23: LCF - LE Proposed Beta UI Student-related Screens

An example of hidden pictures game.

Page 24: LCF - LE Proposed Beta UI Student-related Screens

An example of maze game.

Page 25: LCF - LE Proposed Beta UI Student-related Screens

An example of crossword puzzle game.

Page 26: LCF - LE Proposed Beta UI Student-related Screens

An example of crossword puzzle game.