Toozdey.

com Specification document

David Beltr Tejero dbeltra@gmail.com

Index
1. General observations ............................................................................................. 4 2. Navigation tree ....................................................................................................... 5 3. Metrics .................................................................................................................... 6 4. Wireframes ............................................................................................................. 7 Master: Header ....................................................................................................... 7 New post window 1:............................................................................................. 8 Image alert 1.................................................................................................... 9 New post window 2a drag and resize: ............................................................... 10 Image alert 2.................................................................................................. 11 New post window 2b Toozdey Gallery:.............................................................. 12 New post window 3:........................................................................................... 13 Sign in window: ................................................................................................. 14 User/password alert ....................................................................................... 15 Password recovery window ............................................................................... 15 Success mail alert.......................................................................................... 16 Wrong mail alert............................................................................................. 16 User avatar........................................................................................................ 17 About us window ............................................................................................... 17 Master: Back to top ............................................................................................... 18 Homepage ............................................................................................................ 19 Topic page ............................................................................................................ 20 Search result page................................................................................................ 21 Article page ........................................................................................................... 22 Comment preview ............................................................................................. 25 Profile page........................................................................................................... 26 Edit profile ......................................................................................................... 27 Change picture window.................................................................................. 27 Wrong file alert............................................................................................... 28 Load profile picture window (I) ....................................................................... 28 Crop profile picture window (I) ....................................................................... 29 User comments ................................................................................................. 30

Sign up.................................................................................................................. 31 Upoad profile picture...................................................................................... 32 Load profile picture window (II).......................................................................... 33 Crop profile picture window (II).......................................................................... 33 Picture added................................................................................................. 34 Sign Up error alerts ........................................................................................... 35 Terms and conditions window ........................................................................... 36 Usabilty test .............................................................................................................. 37 Tasks to perform ................................................................................................... 37 Wireframe improvemets ........................................................................................ 37

1. General observations
Toozdey.com is a social website where users can upload articles and comment on them. The articles are classified in eight different topics: Entertainment, Style, Sports, Food, Technology, Politics, Lifestyle and Business, each one ideintified with a different color. There are six different kinds of page: Homepage: displays all the article previews in chronological order, with an infinite scroll system. Topic page: displays all the topic related article previews in chronological order, with an infinite scroll system. Serch result page: displays all the results of the search article previews in chronological order, with an infinite scroll system. Article page: displays the cover image, the article text, a media gallery and a comments section. User page: displays the users profile information, usage statistics and all the articles previews and comments by that user. Sign up page: displays the sign up form.

In addition to those pages there are many interactions displayed in form of pop-up windows. those appear centered on the users screen, while the rest of content is covered with a 50% opacity gray layer that centers the users attention on the new window.

2. Navigation tree
This diagram shows the connections between the different pages and items. Its only three levels deep so the users will never get lost.

3. Metrics
A descriptive image of the main item sizes and margins used on the wireframing process:

4. Wireframes
Master: Header
Show on all pages.

Item 1 2 3 4 5 6 7

Note

Interactions
Link: to Homepage Link: Search result User logged in: Open New Post window 1. User logged out: Open Sign in window

Login area

Onclick: Open Sign in window Onclick: Open about us window Link: Topic page Link: Search result

New post window 1:

Item 1 2 3 4 5 6

Note
Alert: Are you sure? All changes will be lost.

Interactions
Close window Dropdown: Show topics list Show tags below every time user enters a comma

Rich text editor, allows text formatting and embedding Alert: Are you sure? All changes will be lost. Check all fields if anything is empty show image alert 1. Open New post window 2 Close window

Image alert 1

New post window 2a drag and resize:

Item 1 2 3 4 5 6 7 8 9 10

Note
Alert: Are you sure? All changes will be lost.

Interactions
Close window If a valid image is dropped show uploading (6) Otherwise show alert Open browse file menu. When a file is selected show uploading (6) If a valid URL is entered: show uploading (6) Otherwise show alert. Load toozdey galery on Imagearea (7) When image is loaded show resize to fit Imagearea (7) and show.

Imagearea Crop window

Allows to scale and move uploaded picture

Open new post window 1 If no image is selected show image alert 2. Crop image and save it. Open new post window 3

10

Image alert 2

Item 1

Note

Interactions
Load toozdey galery on Imagearea (7)

11

New post window 2b Toozdey Gallery:

Item 1 2 3 4 5 6 7 8 9 10

Note
Alert: Are you sure? All changes will be lost.

Interactions
Close window If a valid image is dropped show uploading (6) Otherwise show alert Open browse file menu. When a valid file is selected show uploading (6) Otherwise alert. If a valid URL is entered: show uploading (6) Othersise show alert. Load toozdey galery on Imagearea (7)

Shows loading progress Imagearea

When image is loaded show resize to fit Imagearea (7) and show. Shows six defeault pictures for the selected topic on step 1, masked with 50% clear grey. Onclick: Unmask image and mask others. Open new post window 1 Save selected image Open new post window 3

12

New post window 3:

Item 1 2 3 4 5 6 7 8 9 10

Note
Alert: Are you sure? All changes will be lost.

Interactions
Close window If a valid image is dropped show uploading (5) and (7) Otherwise show alert Open browse file menu. When a file is selected show uploading (5) and (7) If a valid URL is entered: show uploading (5) and (7) Othersise show alert.

Shwos global loading progress Picpreview Shows loading progress for each image Imagearea

When image is loaded resize to fit Picpreview (6) Shows uploaded pictures or loading progress (7)

User can grad images to reorder them. Displays scrollbar if needed Open new post window 2 Close window and load article page.

13

Sign in window:

Item 1 2

Note

Interactions
Close window Correct info: Close window and show user avatar on login area (header 4) Wrong info: show open user/password alert

3 4 5

Close window; Open password recovery window. Close window and show user avatar on login area (header 4) Close window and load sign up page.

14

User/password alert

Item 1

Note

Interactions
Close window; Open password recovery window.

Password recovery window

Item 1

Note

Interactions
If the email is correct: Show success mail alert If the email is wrong: Show wrong mail alert

15

Success mail alert

Wrong mail alert

Item 1

Note

Interactions
Close window; open About us window.

16

User avatar

Item 1 2

Note
User avatar Dropdown menu

Interactions
Onclick: Link to profile page OnMouseOver: show dropdown menu (2) Onclick: Sign out; Show defeault icon on logn area (header 4)

About us window

17

Master: Back to top

Show on all pages.

Item 1

Note
Only shown when header is not visible

Interactions
Onclick: scroll to the top of the page

18

Homepage

Item 1 2 3 4 5 6 7

Note
Article category label Displays Lumber of comments Cover picture Article title Author profile pic Displays the erticle description Tags

Interactions
Link: topic page Link: article page #comments section Link: article page Link: article page Link: profile page Link: article page Link: search result page

19

Topic page

Article previews have the same interactions as the Homepage Item 1 Note
Personalized title for each topic

Interactions

20

Search result page

Article previews have the same interactions as the Homepage Item 1 Note
Shows the current serach item

Interactions

21

Article page

22

23

Item 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Note
Article title, background color matches topic

Interactions

Link: Author profile page Only shown on own articles when logged in. Article description Article text Gallery navigation Article tags Social icons Next/previous picture Link: search result page Link: Social sharing popup. Logged in: Scroll down to add comment secion Not logged in: show Sign in window. Link: author profile page Link: author profile page Scroll to add comment section Scroll to add comment section; copy comment to quote on comment textarea. Only shown when logged in Alert: are you sure? Clear color icon, when clicked turn to a dark color. Current comment page Last comment page Move add comment section down; Show Scroll to add comment section; copy commentto edit on comment textarea. Delete comment Flag comment Open New post winwow 1 with the article info preloaded.

comment preview and submit buttons

24

Comment preview

Item 1 2

Note

Interactions
Update the previewed comment with the current textboxt content No previous condition: Insert comment on top Quote/Reply: Insert comment beneath the quoted comment with 20px indent.

25

Profile page

Article previews have the same interactions as the Homepage Item 1 2 3 4 5 6

Profile content

Note
Favourite topics (two most published and commented fot this user) Only shown on own user profile

Interactions
Link: topic page Show edit profile Show user posts on profile content (6) Show user comments on profile content (6) Show new post window 1 Displays posts or comments

26

Edit profile

Item 1 2

Note

Interactions
Show: change picture window Save information on the fields

Change picture window

Item 1 2

Note

Interactions
Open browse file menu. Check for a valid file or URL; If there is a valid file open load profile picture (I) window; otherwise show wrong file alert

27

Wrong file alert

Load profile picture window (I)

Item 1

Note

Interactions
Loading progress; show crop profile picture (I).

28

Crop profile picture window (I)

Item 1

Note
Crop area.

Interactions
When move. clicked on corners resize (keeping proportion); When clicked on center drag and

Saves image inside the crop area as profile picture.

29

User comments

Comments have the same interactions as in the article page Item 1 Note
Article title comment

Interactions
Link: article page

30

Sign up

31

Item 1 2 3 4 5 6 7 8

Note

Interactions
Check for a name Check for a word without spaces or special characters Check for an email address OnLostFocus: Check if passwords match,

otherwise show alert1 (Sign up error alerts 2) Check for a name without numbers or special characters Picture info area. Shows upload profile picture form Show terms and conditions window Check form fields and show alert3 (Sign up error alerts 1) for required fields and/or alert4 (Sign up error alerts 4) for unchecked terms and conditions. Create account and open profile page

Upoad profile picture

Item 1 2

Note

Interactions
Open browse file dialog Check for a valid file or URL; If there is a valid file open load profile picture (II) window; otherwise show alert2 (Sign up error alerts 5)

32

Load profile picture window (II)

Item 1

Note

Interactions
Loading progress; show crop profile picture (II).

Crop profile picture window (II)

Item 1

Note
Crop area.

Interactions
When move. clicked on corners resize (keeping proportion); When clicked on center drag and

Saves image inside the crop area as profile picture. Shows picture added on sign up page picture info area (Sign up 6).

33

Picture added

Item 1

Note

Interactions
Show upload profile picture form on picture info area (Sign up 6).

34

Sign Up error alerts

35

Item 1 2 3 4 5

Note
alert3 alert1

Interactions

Show terms and conditions window alert4 alert2

Terms and conditions window

36

Usabilty test
An usability test was performed with five different users within Toozdeys target user profile: User A Age Internet usage Experience on similar sites 32 Medium Low User B 26 High Medium User C 25 Very high High User D 24 Low Low User E 41 Medium Medium

Tasks to perform
Create a toozdey account Publish an article Add a comment Modify their profile picture

It took some time for users A and D to find the add new post icon inside the profile section of the header, and users A, D and E couldnt find easily the login icon but reached the Sign in window when trying to perform any action that required to be registered. All the other tasks were performed without any kind of issue.

Wireframe improvemets
The testing wireframe was improved with an add post icon next to the login icon where it can be easily found.

37