hypatia lms : open realtime educationopenaccess.uoc.edu/webapps/o2/bitstream/10609/59453/9... ·...

Hypatia UXRealtime Education

SitemapHomeDashboardMain Navigation & SearchAccount pages (some in v2.0)

Listing pageDetail pageChatCalendarAssignment HubQ&AAdmin pages (in v2.0)

Author: Joan MiraUOC. Grado Multimedia. TFG

Hypatia UXUpdated on: 24/10/2016. Versión 1.0

Credits: some icons designed by Dave Gandy, Madebyoliver from Flaticon



Sitemap

/settings

/noti�cations

... Listing page Detail page N detail pagesD

//dashboard

/subjects /courses/account /about

D

/?search=keywords

Recursive

/research

/people

D

/contact D

1 / 18

Search results

...

/:uid

...

/news

/requirements

/fees

/subjects

...

D

D

D/:uidD

D

Unique identi�er

D

D

D

D

/people D

/record D

/proceedings D

/exams D

/enrollment D

/news ...

First level item

D/:uid

/news

/admin

/courses

/subjects

/users

/settings

D

...

/blog

/modules

/activities

...

...

...

Pages inside this area require an authenticated user

...

...

...

D

/modules...

/activities...

/modules

D

...

/:uid

D

...

/pages...

/navigation D

/�les...

Coming up in version 2.0



Home

LOGO SIGN IN SIGN UP

OPENREALTIMEEDUCATION

1.0 Main navigation CTARemains visible (�xed) at all timesin all viewports

2.0 Seach module CTARemains visible (�xed) at all timesin all viewports

3.0 Hero sectionThis area serves to promote a specialfeature or story

4.0 Listing componentsDisplays two lisst of cards, one for themost popular courses and another onefor the latest news. Each card representsand item. Maximum 4 courses per row

5.0 Sign in/up controlsAllows the user to register in thewebsite or sign in to his account

6.0 Hero animationDisplays an interactive story toengage the user

7.0 Elevator pitchShort summary of what is Hypatia

2 / 18

Lorem ipsum dolor sit amet, consect Cras sednunc nunc, eu varius nibh. Mauris iscing elit.Cras sed nunc nunc, eu varius nibh. Mauris atortor id justo dapibus... adipis cing elit...

8.0 Tour CTAThis button will bring the user toanother page where he can learnabout Hypatia

1.0

2.0

3.0

4.0

5.0

6.0 7.0

8.0

LOGO

TOUR CTA

HERO ANIMATION

MOST POPULAR COURSES AND LATEST NEWS

Item title

item metadata

Item title

item metadata

Item title

item metadata

Item title

item metadata

Home > Dashboard


Hypatia UXUpdated on: 01/11/2016. Versión 1.03 / 18

1.0 BreadcrumbsIndicates the name of the currentpage and its parents

2.0 Announcements barDisplays the latest globalannouncements to all users

4.0 Authenticated user menuAllows the user to navigate tohis account and settings

5.0 List of enrolled subjectsDisplays the student’s subjects. Eachone has a link to the chat room andthe name of the teacher

6.0 ShortcutsAllows the user to quickly review thetask’s announcements,download orupload �les and check the messages

7.0 Latest direct messagesThe user can reply, reply to all orcontinue a conversation. The greendot is for teachers.

8.0 Link to related chat channelThese links can be used to quicklyaccess the related channel and topic

LOGO

1.0

3.0

2.03.0 List of the user activities

This list contains the currentactivities that the user needsto submit in the next days

5.0

8.0

Dashboard

My subjects

Driving licenseDue in 48 hours

CookingJose Andres

Quantum physicsAlfred Michel

FrenchCarla Bruni

Joan Mira

My direct messages

John Smith 16 Mar 2016#maths #test 1I’ve uploaded the new formulas. Please let me ...

Martin Lee 17 Mar 2016#french #assignment 1

Hi Joan. In the 2nd question, you said ‘trais...

Morgan Freeman, John Doe 19 Mar 2016#history #assignment 2

Hi Joan and John, the result of your assignment

6.0

#driving-license

#quantum-physics

#french

#cooking

7.0

Andrew, John Doe 24 Mar 2016#video #assignment 1

Joan, John, just a gentle reminder that the

4.0

from August 15th 23:00pm until August 16th 8am, the website will be o�-line due to maintenance works. Apologies for the trouble.

My activities

Self-driving essayMarty McFly

Quantum physics test4 days remaining

French exam5 days remaining

Microwaves activityDue in 12 days



1.0 Main navigation close CTAThe close icon appears only when thenavigation panel is opened

2.0 Navigation �yout panelIt displays a list of links. The panel closeswhen a link is clicked. The opening andclosing animation is a slide from the left

3.0 Navigation active itemThe item that corresponds to the currentpage is styled di�erently

4.0 Search close CTAThe close icon appears only when thesearch panel is opened

5.0 Search text inputAllows the user to search users, messagesand �les using keywords

6.0 Search �yout panelContains the search input and search results.The panel closes when a link is clicked. Theopening and closing animation is a slidfrom the left. The content is scrollable. Thesearch results can be users, messages orquestions from the help area

Main Navigation & Search

Courses

People

About

Admin

News

Dashboard Peter

Peter Paul Rubens

Peter Pan

Peter Man

Hi Peter, tomorrow we are going ...16 Mar 2016#maths #test 1

Hi Peter, we need to meet for th ...23 Mar 2016#english-literature

Hey Peter! How are you doing wi...27 Mar 2016#physics #exam

Users

Messages

Subjects

1.0

2.0

3.0

4.0

5.0

Q&A

... Peter James was born ...When was Peter James born?

6.0

7.0

7.0 OverlayA dark overlay will sit on top of the maincontent while the �yout is opened. Clickingthe overlay will close the �yout

Home > Account



1.0 User avatarUsers without a photo will havea neutral avatar

2.0 Welcome messageA summary of the user activity

3.0 Account navigation CTAIt behaves like a toggle button thatopens and closes the �yout

5.0 Link to the chat channelThe studentt’s tutor has a speci�cprivate channel

LOGO

Account

Joan Mira

Hi Joan!, your last login was 3 days ago. You havewritten 324 messages in the last month and havepassed 17 subjects since you joined. Well done!

Contact your tutor: (John Smith) #tutor

1.0

2.0

4.0 List of courses and subjectsThis list is a summary of the currentcourses and subjects the user isenrolled into

4.05.0My courses My subjects

Quantum physics #quantum-physicsGrado Multimedia

Graphic design #graphic-design

User experience #ux

Mathemetics II #maths2

Git repositories #git-repositoriesMsc Open Source App...

Licenses #licenses

3.0

Marty McFly

Thomas Heatherwick

Alice Aniston

Leo Tolstoi

Albert Henrik

James Thomas

Placeholder formarketing messages

6.0

6.0 Marketing messagesThis area is reserved for messagesthat the learning platform wantsto send to students, like promos,o�ers or other marketing material

Home > Account > Settings



1.0 Gravatar photoThe user avatar is picked up fromthe Gravatar service

2.0 General settingsUpdate password, email, languageand time zone

3.0 Personal detailsUpdate full name and address

4.0 Save changes buttonSubmit the changes to the serverand receive an status message

LOGO

Account > settings

Joan Mira

New password...

Joan Siddharta

Mira

Martos

Education street, 28

SE1 8BT

London

United Kingdom

[email protected]

Apartment 128

English language

London time zone

SAVE CHANGES

1.0

2.0

3.0

All changes saved! or Error!4.0

Change avatar 5.05.0 Change avatar link

Con�rm password...

Placeholder forfuture settings

This link will bring the user to thearea where he can update his avatar

6.0

6.0 Future settingsPlaceholder reserved for future usersettings requirements

Home > Account > Noti�cations



1.0 Noti�cations tableDisplays all the con�gurable items

2.0 Browser noti�cationsWhen enabled, the browser will showa small popup for a few seconds

3.0 Email noti�cationsWhen enabled, the user will receivean email from the website

LOGO

Account > noti�cations

Joan Mira

New message in any of my channels

New direct message

Mention in any of my channels

New message from the support team

New message from my tutor

Near deadline

Grades published

New answer to your question

New answer to a question you are subscribed to

New message in channel

New direct message

Mention in channel

1.0

2.0 3.0

browser alert email

Placeholder forfuture noti�cations

4.0 Future noti�cationsThis area will enable admins toinclude other types of noti�cations,i.e. push messages or SMS

Home > Account > Record



1.0 List of gradesDisplays all the student’s grades

LOGO

Account > record

Joan Mira

Grado Multimedia 210 / 240 credits

Msc. Open Source Applications 36 / 120 credits

2.0

My courses My subjects

Quantum physics #quantum-physicsGrado Multimedia


User experience #ux


Git repositories #git-repositoriesMsc Open Source App...

A

A

A

A

A

1.0

2.0 Courses’ progressDisplays the completion progressof the students’ courses

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

1st 2nd 3rd Final

Home > Category



1.0 Listing view switchAllows the user to switch betweenthe cards and list views

2.0 Listing titleThis is the listing page main title

3.0 Card layoutDe�nes an individual entity withits title and metadata.

Progressive loading:More cards will load automaticallywhen the scroll position reachesthe end of the list


Listing page

Cards List

Item title Item title Item title Item title

Item title Item title Item title Item title

item metadata item metadata item metadata item metadata

item metadata item metadata item metadata item metadata

2.0

1.0

3.0Listing view main title

(card view)

Home > Category



1.0 List of itemsDisplays the list of items sorted bythe selected �lters. It includes athumbnail, title and metadata foreach itemLOGO SIGN IN SIGN UP

Listing page

Cards List

Item title lorem ipsum dolor met et magu fer matoitem metadata

1.0Listing view main title

(list view)






< Previous 1/10 Next >

2.0 Sorting and �ltersAllows the user to sort the itemsin di�erent ways

Sort by title

Sort by date

Sort by type

2.0

3.0

3.0 Pagination controlsAllows the user to navigate throughthe items in batches

Display 10 items per page

Home > Page title



1.0 Main contentThis space is for test, images, videosand other media related with thecurrent loaded page.

There will be three di�erent layouts withone, two or three columns

2.0 Meta dataEach content type can have a di�erent setof meta data


Detail page

Detail page main title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at justo sodales,interdum justo vitae, ultricies ligula. Praesent scelerisque lorem a enim sollicitudin,hendrerit egestas sapien fermentum. Suspendisse potenti. Donec tempus arcu velarcu ultricies, eget faucibus orci condimentum. Quisque a mauris dictum, consectetu ligula ut, semper purus. Ut fermentum ultricies ex, ac pharetra urna facilisis a. Nullanon nisl eu lectus rhoncus elementum eu maximus dolor. Nam in purus at ex euismodfaucibus. Integer nec urna imperdiet, hendrerit risus quis, dignissim nulla. Aliquaex lacus, sagittis ut viverra nec, fermentum sed ligula.

Cras aliquet leo non luctus accumsan. Proin non nulla quis erat faucibus sollicitudinsed eu ante. Phasellus quis maximus felis, eget aliquet nulla. Donec tempus scelerisquerutrum. Suspendisse dictum nec erat ut feugiat. Mauris bibendum felis quis purusviverra interdum. Vestibulum a quam cursus, vulputate purus vel, vehicula leo.Phasellus vehicula tellus sed felis vestibulum, eu lobortis est pharetra. Suspendisseturpis tellus, �nibus nec venenatis eget, malesuada vitae eros.

Pellentesque arcu est, fermentum eu tristique in, interdum porttitor mi. Donec...

1.0Published on the 5th of April 20172.0



1.0 List of subjects & supportEach subject and the support grouphas its own list of channels and users

2.0 New message(s) in subjectNoti�es the user of new messages

3.0 List of channels

4.0 List of users in the channelUsers can exchange private messages

5.0 Group and channel titlesIncludes the total number of users

6.0 Close panel CTAIt closes the �yout panel

7.0 Reply to messageAllows the user to reply to amessage in the channel

8.0 Channel messagesList of messages sent by the users.Sorted by date. In�nite scroll

LOGO

Chat & Messages

MA

EL

NT

QP

GD

CHANNELS (6)

# module-1# module-2

# module-4# activity-1# activity-2

DIRECT MESSAGES (11)

antoniohgazpachumartinmpetermolcaprileomartdexterhartjerrylowbalztorandymurhectorfer

# announcements

# laboratory

# module-3

#module-3 (11)

1

Message #module-3+

gazpachulorem ipsum dolor emit

Today

Joan Mira

capriwhat does the formula from page 3 means? It’s very complex!

gazpachuit’s just an old topic. Don’t use it for exercise 4



gazpachuit’s just an old topic. Don’t use it for exercise 4



22:15

22:07

22:03

22:04

8:31

8:35

8:42

22:10

2.0

4.0

5.0

6.0

7.0

8.0

10.0

9.0 Submit new messageAllows the user to submit a newmessage to a channel or another user

10.0 Attach a �leAllows the user to send a �le tothe channel o another userSU

#maths

1.0 3.0

9.0



1.0 Month navigationAllows the user to switch months

2.0 Calendar layoutDisplays the days in the selected month.Includes icons for the activities

3.0 List of subjectsEach subject has a color associated

4.0 List of activitiesEach activity has an icon associated

5.0 Icons inside the calendarEach icon adopts the color of thesubject that it represents

6.0 TooltipsDisplays the activity details

LOGO

Calendar

Joan Mira

26 27 28 29 30 1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 19 19 21 22 23

24 25 26 27 28 29 30

20

< >

MON TUE WED THU FRI SAT SUN Subjects

MathsEnglish literatureGraphic designPhysics

Activity

Start moduleEnd moduleStart activityEnd activityNew assignment grade

Start assignment 2: Quantum physics

1.0

2.0

3.0

5.0

4.0

6.0

November 2016

1.0

2.0

4.0

5.0



1.0 Course title

2.0 Subject title

4.0 List of assignmentsEach assignment will show the gradeobtained and allow the user to upload his assignment before thedeadline

5.0 Download CTAAllows the user to download hisassignment

6.0 Upload CTAAllows the user to upload hisassignment

6.0 Course datesDisplays the course start andend dates

LOGO

Activities Hub

Joan Mira

Quantum physics #quantum-physics


User experience #ux


A

B

A

-

10/08/2016

21/08/2016

05/09/2016

16/09/2016

10/08/2016

21/08/2016

05/09/2016

16/09/2016

10/08/2016

21/08/2016

05/09/2016

16/09/2016

10/08/2016

21/08/2016

05/09/2016

16/09/2016

10/08/2016

21/08/2016

05/09/2016

10/08/2016

21/08/2016

3.0Grado Multimedia

Physics (teacher: #leotolst)

Quantum physics #quantum-physics


User experience #ux


A

A

-

-

UX (teacher: #martinm)

English II (teacher: #alberth)

Grade Grade date Deadline Upload date



1 Oct 2016 - 8 Jan 2017

6.0



1.0 Month navigationAllows the user to switch months

2.0 Calendar layoutDisplays the days in the selected month.Includes icons for the activities

3.0 List of subjectsEach subject has a color associated

4.0 List of activitiesEach activity has an icon associated

5.0 Icons inside the calendarEach icon adopts the color of thesubject that it represents

6.0 TooltipsDisplays the activity details

LOGO

Questions & Answers

Joan Mira

Website issues

All categories

Subjects & Teachers

Enrollment

Proceedings

Exams & Grades

Courses

Modules

Other

Sort by most recent

Show only my questions

What’s the purpose of having elefants in a room?4by #gazpachu on 17 Jul 2016

What do you think about romance?1by #martinm on13 Jan 2016

What are 3 things you get turned o� by?2by #andymur on 11 Apr 2016

8 replies

3 replies

1 replies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec felis non arcufermentum ultrices. Donec est metus, venenatis non massa nec, pretium congue dolor.by #andymur on 11 Apr 2016

Showing results for questions tagged as ‘Courses’

Ask a question... SUBMIT

< Previous 1/10 Next >

Reply... SUBMIT

hypatia lms : open realtime educationopenaccess.uoc.edu/webapps/o2/bitstream/10609/59453/9... ·...

Documents