Toozdey Report

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

2

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

3

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 user’s 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 user’s screen, while the rest of content is covered with a 50% opacity gray layer that centers the user’s attention on the new window.

4

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

5

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

6

4. Wireframes Master: Header Show on all pages.

Item

Note

Interactions

1

Link: to Homepage

2

Link: Search result

3

User logged in: Open New Post window 1.

User logged out: Open Sign in window

4

Login area

Onclick: Open Sign in window

5

Onclick: Open about us window

6

Link: Topic page

7

Link: Search result

7

New post window 1:

Item

Note

Interactions

1

Alert: Are you sure? All changes will be

Close window

lost.

2

Dropdown: Show topics list

3

Show tags below every time user enters a comma

4

Rich text editor, allows text formatting and embedding

5

Alert: Are you sure? All changes will be

Close window

lost.

6

Check all fields if anything is empty show image alert 1.

Open New post window 2

8

Image alert 1

9

New post window 2a drag and resize:

Item

Note

Interactions

1

Alert: Are you sure? All changes will be

Close window

lost.

2

If a valid image is dropped show uploading (6) Otherwise show alert

3

Open browse file menu. When a file is selected show uploading (6)

4

If a valid URL is entered: show uploading (6) Otherwise show alert.

5

Load toozdey galery on Imagearea (7)

6

When image is loaded show resize to fit Imagearea (7) and show.

7

Imagearea

8

Crop window

Allows to scale and move uploaded picture

9

Open new post window 1

10

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

Note

Interactions

1

Alert: Are you sure? All changes will be

Close window

lost.

2

If a valid image is dropped show uploading (6) Otherwise show alert

3

Open browse file menu. When a valid file is selected show uploading (6) Otherwise alert.

4

If a valid URL is entered: show uploading (6) Othersise show alert.

5 6

Load toozdey galery on Imagearea (7) Shows loading progress

When image is loaded show resize to fit Imagearea (7) and show.

7

Imagearea

Shows six defeault pictures for the selected topic on step 1, masked with 50% clear grey.

8

Onclick: Unmask image and mask others.

9

Open new post window 1

10

Save selected image Open new post window 3

12

New post window 3:

Item

Note

Interactions

1

Alert: Are you sure? All changes will be

Close window

lost.

2

If a valid image is dropped show uploading (5) and (7) Otherwise show alert

3

Open browse file menu. When a file is selected show uploading (5) and (7)

4

If a valid URL is entered: show uploading (5) and (7) Othersise show alert.

5

Shwos global loading progress

When image is loaded resize to fit Picpreview (6)

6

Picpreview

Shows uploaded pictures or loading progress (7)

7

Shows loading progress for each image

8

Imagearea

User can grad images to reorder them. Displays scrollbar if needed

9

Open new post window 2

10

Close window and load article page.

13

Sign in window:

Item

Note

Interactions

1

Close window

2

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

3

Close window; Open password recovery window.

4

Close window and show user avatar on login area (header 4)

5

Close window and load sign up page.

14

User/password alert

Item

Note

1

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

Note

Interactions

1

User avatar

Onclick: Link to profile page OnMouseOver: show dropdown menu (2)

2

Dropdown menu

Onclick: Sign out; Show defeault icon on logn area (header 4)

About us window

17

Master: Back to top Show on all pages.

Item

Note

Interactions

1

Only shown when header is not visible

Onclick: scroll to the top of the page

18

Homepage

Item

Note

Interactions

1

Article category label

Link: topic page

2

Displays Lumber of comments

Link: article page #comments section

3

Cover picture

Link: article page

4

Article title

Link: article page

5

Author profile pic

Link: profile page

6

Displays the erticle description

Link: article page

7

Tags

Link: search result page

19

Topic page

Article previews have the same interactions as the Homepage Item

Note

1

Personalized title for each topic

Interactions

20

Search result page

Article previews have the same interactions as the Homepage Item

Note

1

Shows the current serach item

Interactions

21

Article page

22

23

Item

Note

1

Article title, background color matches

Interactions

topic

2 3

Link: Author profile page Only shown on own articles when

Open New post winwow 1 with the article info

logged in.

preloaded.

4

Article description

5

Article text

6

Gallery navigation

Next/previous picture

7

Article tags

Link: search result page

8

Social icons

Link: Social sharing popup.

9

Logged in: Scroll down to add comment secion Not logged in: show Sign in window.

10

Link: author profile page

11

Link: author profile page

12

Scroll to add comment section

13

Scroll to add comment section; copy comment to quote on comment textarea.

14

Only shown when logged in

Scroll to add comment section; copy commentto edit on comment textarea.

15

Alert: are you sure?

Delete comment

16

Clear color icon, when clicked turn to a

Flag comment

dark color.

17

Current comment page

18

Last comment page

19

Move

add

comment

section

down;

Show

comment preview and submit buttons

24

Comment preview

Item 1

Note

Interactions Update the previewed comment with the current textboxt content

2

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

Note

Interactions

1

Favourite topics (two most published

Link: topic page

and commented fot this user)

2

Only shown on own user profile

Show edit profile

3

Show user posts on profile content (6)

4

Show user comments on profile content (6)

5

Show new post window 1

6

Profile content

Displays posts or comments

26

Edit profile

Item

Note

Interactions

1

Show: change picture window

2

Save information on the fields

Change picture window

Item

Note

Interactions

1

Open browse file menu.

2

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

Note

Interactions

1

Crop area.

When

clicked

on

corners

resize

(keeping

proportion); When clicked on center drag and move.

2

Saves image inside the crop area as profile picture.

29

User comments

Comments have the same interactions as in the article page Item

Note

Interactions

1

Article title comment

Link: article page

30

Sign up

31

Item

Note

Interactions

1

Check for a name

2

Check for a word without spaces or special characters

3

Check for an email address

4

OnLostFocus:

Check

if

passwords

match,

otherwise show alert1 (Sign up error alerts 2)

5

Check for a name without numbers or special characters

6

Picture info area.

Shows upload profile picture form

7

Show terms and conditions window

8

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

Note

Interactions

1

Open browse file dialog

2

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

Note

1

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

Crop profile picture window (II)

Item

Note

Interactions

1

Crop area.

When

clicked

on

corners

resize

(keeping

proportion); When clicked on center drag and move.

2

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

Note

1

alert3

2

alert1

3

Interactions

Show terms and conditions window

4

alert4

5

alert2

Terms and conditions window

36

Usabilty test An usability test was performed with five different users within Toozdey’s target user profile: User A

User B

User C

User D

User E

Age

32

26

25

24

41

Internet usage

Medium

High

Very high

Low

Medium

Experience on similar sites

Low

Medium

High

Low

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 couldn’t 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