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