Challenge Overview
Welcome to IBM - Taxonomy as a Service Widget UI Prototype Challenge
The main task of this project is to create the IBM - Taxonomy as a Service Widget UI Prototype Challenge based on the provided PSD Storyboard design.
For this challenge you just need focus on Desktop layout. In the end of this challenge we need solid UI prototype result with best practice solutions.
Final Submission Guidelines
Files Downloadable
storyboard.zip - Storyboard Design (Source file with Adobe Illustrator .ai file format)
Service Widget Interaction Requirements
General Requirements
- Taxonomy widget need displayed centered of browser screen. Shows a fixed width for Service Widget box like storyboard look
- All function/interactions need works dynamically in single page without navigating to different pages
- Fonts: You can use “Helvetica Neue” or “Arial” in your submission
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- All background color/border need created as CSS properties instead of image based.
- All data inside the table need stored in separated JSON file
- You need create separated JSON files for parent and all children nodes. Make they linked by unique ID.
0. Create Index Page
- Create index.html page and put these 2 links to take user to different color theme
-- Black Theme
-- Light Theme
- Both color themes functionalities need identical!
1. Black Theme Flow
screenshot: Taxonomy_01--Loading.jpg
- “Browse List” area placed in the left side and “Added Taxonomies” in the right side
- Search input shows text placeholder, on focus text need to be hidden
- “Browse List” tab show active state
- At page load, progress bar show up, table shows table header only.
- Show loading progress in “Browse list” area while loading all JSON files
- Progress bar need reflect actual percentage while load all JSON files.
- Once all JSON files loaded, need show all taxonomies list in table
- Important!: We need leave space for action buttons in the bottom of left and right side area for consistency.
screenshot: Taxonomy_02--Browse.jpg
- All levels need to be on collapsed states by default
- Match differences of text colors.
- User picks from the left side and the chosen ones are shown on the right.
- User can add items by clicking on the add button (+) or selecting multiple items and using the add option that appears at the bottom (when items are selected)
screenshot: Taxonomy_03--Settings.jpg
- User can toggle various preferences by clicking on the options button (beside the close widget).
- “x” button that placed next to options button can be dead link for now.
- As for suggestion or type ahead, user can select both radio buttons
- Checked on the “Enable Help” selected by default
- When this checked on, user can see tooltips when hover above colored texts and “?” button in row (screenshot: Taxonomy_06--Contextual Help.jpg)
- Checked off the “Enable Help” need disable the tooltips function above colored texts and disable when click “?” button (screenshot: Taxonomy_05--Taxonomy Help.jpg)
screenshot: Taxonomy_04--Browse with Recommended.jpg
- To make sure this flow included in your prototype, please include “Recommendation Taxonomies” loaded after progress bar completed on page load
- User can add all recommended ones by clicking on the add all recommended button at the bottom. To close recommended taxonomies, user just has to click on the “x” across the recommended taxonomies title.
- The drag to add and additional options (will be shown later) will also be consistent and applied to the recommended taxonomies
screenshot: Taxonomy_05--Taxonomy Help.jpg
- Clicking on the question mark (right area of the row, just beside the add button) for each taxonomy item display the help below.
- Click “x” button need hide the help message
- FYI: help content will be vary based on different row content.
screenshot: Taxonomy_06--Contextual Help.jpg
- Contextual help will be available for all terms, including ones in the taxonomy help area. This is triggered by hovering over a term.
- Show tooltips for “Code”, “Status” and “Exp Date”
- You can put dummy text for now
screenshot: Taxonomy_07--Open Level 1.jpg
- The first level opened
- There’s border line in the left side
- If level text is long, title need displayed as multiple lines without breaking another row.
screenshot: Taxonomy_08--Open Level 2.jpg
- The second level opened
- There’s another border line in the left side
- Show correct indentation
screenshot: Taxonomy_09--Open Level 3.jpg
- The third level opened
- There’s another border line in the left side
- Show correct indentation
screenshot: Taxonomy_10--Select One.jpg
- Important!: We need leave space for action buttons in the bottom of left and right side area for consistency.
- A row item selected. To select, user can click on a row or click on the checkbox. Holding control or shift and clicking multiple rows will result to multiple selections like the one seen in Gmail.
- If user select the parent, all children need automatically selected
- See how an additional “Selected” tab has appeared - indicating that there is 1 selected item. The selected items tab would be useful when reviewing selected items (If they are distributed across a very long list).
- Take note of the action button appear at the bottom as well
screenshot: Taxonomy_11--Row right click.jpg
- Right clicking a row will give multiple selection options - select the items itself, or select it including it’s children
- Show hover state for each right click menu
screenshot: Taxonomy_12--Parent and children selected.jpg
- If the select item including its children is selected from the previous item above, this is the result.
- The count in the selected tab has been updated as well
- Selected row need show different background color
screenshot: Taxonomy_13--Selected Tab.jpg
- The selected tab updated.
- This tab appears only when items are selected and is useful for review selections before adding them.
- To add, consistent with other sections, user can drag selected items to the added pane or use the add button below
- For this tab, all row will be automatically selected
screenshot: Taxonomy_14--Drag to Add.jpg
- Selected items (either from the browse, selected or search result tab) can be dragged to the added taxonomies pane.
- Once drag starts, the added pane shows a visual indicator as to where the items can be dragged
- FYI: If content height larger than Browse List height we need show custom scrollbar
- Match scrollbar look
screenshot: Taxonomy_15--Added.jpg
- Items added and the Added taxonomies panel populated.
- The count appears in its title as well.
- Items that are added (in the browse or search result list) will get an indicator that they have already been added.
- The plus sign (add) becomes a minus sign (remove from added)
- Also notice checkboxes turn into checkmark icons for items that already moved to the right side
- Done button can be dead link
screenshot: Taxonomy_16--Added Selected.jpg
- Items in the added pane can be selected.
- Respective options buttons appear at the bottom
Important!:
- For these 2 screen below, you can just show same typeahead/autosuggest/autocomplete function.
- Highlighted text need show bold font-weight
screenshot: Taxonomy_17--Suggestions.jpg
- Suggestions appear as user inputs a string.
- User can do selections or add directly from selections.
- If enter is pressed or if “view all search result is selected”, search result are shown.
screenshot: Taxonomy_18--Typeahead.jpg
- How the type ahead looks like. Same as suggestions, user can select or add from here.
- If enter is pressed or if “view all search results is selected”, search result are shown.
screenshot: Taxonomy_19--Search Results.jpg & screenshot: Taxonomy_20--Search Results Selected.jpg
- This is how the search result tab look like.
- Adding items is similar to what was discussed before.
- If items are selected in the search results (or in parallel, in the browse tab) the selected pane appears as the third tab, consolidating all selected items.
- If clear search is clicked, the search is cleared, and the search tab disappears.
2. Light Theme Flow
- These are screenshots for Light Theme, functionalities need remain same like Black Theme.
- All background color/border need created as CSS properties instead of image based.
screenshot: Taxonomy_21--Light Loading.jpg
screenshot: Taxonomy_22--Light Browse.jpg
screenshot: Taxonomy_23--Light Settings.jpg
screenshot: Taxonomy_24--Light Browse with Recommended.jpg
screenshot: Taxonomy_25--Light Taxonomy Help.jpg
screenshot: Taxonomy_26--Light Contextual Help.jpg
screenshot: Taxonomy_27--Light Open Level 1.jpg
screenshot: Taxonomy_28--Light Open Level 2.jpg
screenshot: Taxonomy_29--Light Open Level 3.jpg
screenshot: Taxonomy_30--Light Select One.jpg
screenshot: Taxonomy_31--Light Row right click.jpg
screenshot: Taxonomy_32--Light Parent and children selected.jpg
screenshot: Taxonomy_33--Light Selected Tab.jpg
screenshot: Taxonomy_34--Light Drag to Add.jpg
screenshot: Taxonomy_35--Light Added.jpg
screenshot: Taxonomy_36--Light Added Selected.jpg
screenshot: Taxonomy_37--Light Suggestions.jpg
screenshot: Taxonomy_38--Light Typeahead.jpg
screenshot: Taxonomy_39--Light Search Results.jpg
screenshot: Taxonomy_40--Light Search Results Selected.jpg
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 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
- 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
- IE10
- Firefox Browser latest version
- Safari Browser latest version
- Chrome Browser latest version