Challenge Overview
Welcome to SISN Network Graph Visualizer UI Prototype Challenge
For this UI Prototype challenge, we need you update existing prototype to build Network Graph Visualizer layout and interactions based on the provided storyboard and requirements stated below
Final Submission Guidelines
IMPORTANT!
- Your submission must use best practices for responsive layout that works on Desktop and Tablet platform. (Tablet storyboard not provided, but we are looking for you to help with best practices for responsive layout. You will be judged on the desktop version and your tablet version will be a bonus)
Files Downloadables
sisn-prototype.zip - UI Prototype as Base Updates
storyboard-images.zip - Storyboard screens
storyboard-source.zip - Storyboard source files
MFVN Network Graph Visualizer UI Prototype Requirements
1. Add Network Visualizer button
screenshot: 01A_Dashboard(Network-Visualizer-Btn).jpg
- Add new button on page header before alert icon
- Add the button to all prototype pages
- Hover state need follow consistent image background slide up/down effect.
- Show tooltip when hover on Network button (screenshot: 01B_Dashboard(Network-Visualizer-Btn-Hover).jpg)
- Re-use existing tooltip style and functions
- Click this button take user to Network Visualizer page
2. Network Visualizer
screenshot: 02_Networks-Visualizer.jpg
- This is how Network Visualizer page look and feel
- On Page load, this page not show right column
- Visualizer graphic is centered in the main content area frame
- On Hover of any of the items, right sidebar drawer show up
- When user click the right hand column sticks and user can interact with UI in right hand bar
- Page title/breadcrumb placed on top side
- Below breadcrumb, number information can be plain text
- Load More and Load All Network buttons can be used to show different states of the visualizer showing 8 or more bubbles
- Network Visualizer area need use fluid width, but the network graph remain centered
- You may "Create your own code", or "Use Open Source Graph Libraries" to build out the Network Visualizer
- Check these sites for javascript libraries that can be used to build the Network Visualizer:
-- https://github.com/mbostock/d3/wiki/Gallery
-- http://bl.ocks.org/mbostock
-- http://bost.ocks.org/mike/
-- http://neo4j.com/developer/guide-data-visualization/
-- http://bl.ocks.org/mbostock/4062045
-- http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
-- http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07
We are looking for the following functional requirements for our Relationship Visualizer:
- Your solution must be flexible and be able to show a few to many networks, organizations and user relationships. The storyboard shows variations of 8 or more, but ideally your solution should be able to dynamically display any number of options
- Basic interaction model for this story board should go from global view (showing networks) to network view (showing organizations) to organization view (showing users) as a user double clicks a bubble on the visualizer
- As a user interacts with the items on the visualizer, on a click, the right hand column will display content related to the item selected, double click will change the relationship visualizer view as described above
- We have a separate view for a "File Visualizer" which shows the relationship between files and who they are shared with. This can be a separate view
- We want to show how a user can "drag and drop" files from their "my file" list on to network, and organization items within the visualizer
Relationship Visualizer
- Keep the logo centered on your visualizer in a consistent size.
- Use size and scale attributes to properly size elements in your visualizer. For instances where you have more than 8 items in the visualizer, use roll over and hover states to increase size of the highlighted item
- Placement of the items in the visualizer should be dynamic similar to this example.
- For less than or equal to 8 bubbles, network need show bigger size (02A_Networks-Visualizer(If networks less than or equal to 8).jpg)
- This is how visualizer look for more than bubbles (02B_Networks-Visualizer(If networks more than 8).jpg)
- Bubbles placement always filled 360degree area, line should use consistent length
- At first load of Graph Visualizer, we are looking interesting animation jquerry effects, maybe something like bubble effect that load one by one?
- There should be easy configuration to display as many bubbles need displayed in the graph
- Tooltips must always show on top of each bubbles by default for hover state
- User can zoom in/out the network graph. The zoom changes the size of the items in the visualizer
- Zoom in need increases size of all bubble, line and logo elements
- Zoom out need decreases size of all bubble, line and logo elements
- When user hover on bubbles, show quick tooltip (screenshot: 02C_Networks-Visualizer(Network list hover).jpg)
- For hover state, use transparency and color to highlight selected item. Selected item should be in highlight color and unselected items can scale back in transparent
- Reverted color on hover depended on icon color (screenshot: 02D_Networks-Visualizer(Network list hover2).jpg)
- Clicking on each of the items in the visuaizer graph will update the sidebar content dynamically
- One of the key functional aspects we want to demonstrate is the ability to "drag and drop" files from the my file list on to network items on the visualizer graph Read “My Files” tab below for detail instruction
- Double click bubble need load another graph visualizer set (screenshot: 03A_Organizaion-Within-Single-Network.jpg)
- Show dynamic way to load up another graph set without the need to load another page
- Make use of breadcrumb nav to navigate between visualizer views (global, network, organization)
- Match different bubble icons.
- Double Click the Center icon to take the user back to the previous Visualizer
- Double Click “Organization” bubble take user to Single Organization Graph Visualizer (screenshot: 04A_Single-Organization-View.jpg)
- For Single Organization view, you need show 2 tabs: Quick information and Files tab
Sidebar area
screenshot: 02A_Networks-Visualizer(If networks less than or equal to 8).jpg
- Sidebar area need use fixed width and always placed in the right side
- Match active and inactive tab style
- Tabs need show up are:
Quick Network Information tab
- This shows the overview information of a highlighted item on the visualizer list. By default it will show the content for the Network or organization that is currently selected in the visualizer and refresh as a user interacts with items on the visualizer pane.
- In the bottom of quick information there’s row with toggle function for “Organization”, “Users” and “Shared Files”
- Organization (screenshot: 02P_Networks-Visualizer(Network Activity Accordion2).jpg)
- In the right side (3 vertical dotted button), click this need show tooltips (02M_Networks-Visualizer(My Files - Actions Btn).jpg)
- Tooltip menu are: “Delete”, “Edit”, “Share”, “Download” and “File Visualizer”
- All menus are clickable, you can put dead link. Except “File Visualizer”, this “File Visualizer” menu need take user to “File Visualizer” page
- Apply same tooltip wherever that shows up in Network Visualizer sidebar
- User (screenshot: 02O_Networks-Visualizer(Network Activity Accordion2).jpg)
- Shared Files (screenshot: 02N_Networks-Visualizer(Network Activity Accordion).jpg)
- For Shared Files, show a group of mini action buttons (“delete”, “download” and “graph”)
- Search input placed in the right side
Network Activity tab
screenshot: 02E_Networks-Visualizer(Network Activity).jpg
- This tab show connection line of Network Activity
- Username and Network Name are links, you can put dead links for now
Network Setting tab
screenshot: 02F_Networks-Visualizer(Network Setting).jpg
- This is Network Setting, there’s another sub-tab in this screen for “Organization” and “User”
- Search input placed on top of tab
- You need create auto suggest function (screenshot: 02F2_Networks-Visualizer(Network Setting2).jpg)
- Highlight text user typed with underline text
- Show hover state on auto suggest text
- After click the value, show new content below the input
- User can remove the row by click “x” button
- Add Users/Organizations button can be dead link (screenshot: 02F3_Networks-Visualizer(Network Setting3).jpg)
My Files tab
screenshot: 02G_Networks-Visualizer(My Files).jpg
- This is My Files Tab
- For Shared Files, show a group of mini action buttons (“delete”, “download” and “graph”)
- User can checked each My Files row, there’s checkmark placed in the right side (screenshot: 02I_Networks-Visualizer(My Files - Drag2).jpg)
- Click row with checked on icon will make the checkmark hidden (screenshot: 02H_Networks-Visualizer(My Files - Drag).jpg)
- User can drag row with checked on mark
- When row dragging, there’s indicator “2 Files” (screenshot: 02J_Networks-Visualizer(My Files - Drag3).jpg)
- When reach above network, only the logo and bubble above draggable area show normal color. Other bubbles show less transparency (screenshot: 02K_Networks-Visualizer(My Files - Drag4).jpg)
- After row dropped, show message in the bottom left of Network Visualizer (screenshot: 02L_Networks-Visualizer(My Files - Drag5).jpg)
3. File Sharing Visualizer
screenshot: 05_File-Sharing-Visualizer.jpg
- This screen load when user click “File Visualizer” menu in the right side of sidebar row
- File icon placed in the center of graph
- Click each bubbles update sidebar content dynamically
- Show 2 tabs for File Sharing Visualizer, Quick information including activity and comments and My Files tab
- For Organization row, user can expand/collapse the row (screenshot: 05B_File-Sharing-Visualizer (Organization-Capabilities).jpg)
- Re-use existing toggle buttons
- This is how “Comments” tab look, click enter need add data into row (screenshot: 05C_File-Sharing-Visualizer (Comments).jpg)
- For this File Visualizer, you need show dotted and solid line type (screenshot: 05D_File-Sharing-Visualizer (Dotted _ Solid Short Description).jpg)
- Show My Files tab look (05D_File-Sharing-Visualizer (MyFiles-List).jpg)
Client Priorities (The items that are considered highest prototype priorities)
- Creating best practice of UI Prototype code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Browsers Requirements
Desktop
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet
- Safari Browsers on iPad (Landscape & Portrait)