Challenge Summary
Welcome back to SQuIDs! We are reposting the "User Entry Controls" contest to help clarify the requirements and goals of this design task.
SQuIDS is an existing web application that is used to support test case creation/planning and defect management. The goal of this contest is to focus on the "User Entry Controls" and help us create a professional user experience around how a user interacts with the SQuIDs application. This contest is very important in that it is part of the design foundation for the entire SQuIDs application user experience!
Note: We have started a "Bonus Prize" for the Studio Member who wins the most SQuIDs2 Studio Contests! The SQuIDs2 Series is going to be running up to 7 more user interface/user experience contests over the next two months! We are looking for the Studio Community to help us innovate the user interface/experience of the SQuIDs Application.
For this contest focus on new design concepts around better user entry controls, forms, inputs etc. Do some research on modern user entry controls and see what other modern progressive applications are using.
For this contest we already have the user interface/graphic design done! (download the provided PSD source files). We are looking for you to focus on the user entry fields/forms and plan/design an improved user experience. What type of user entry controls should be used to improve the user experience within the SQuIDs application?
Round 1
We would like to see your intitial design concepts for these items:
- Search Filters used here (02-Test-Case-Search.jpg and 06-Self-Service-Extracts.jpg)
- Test Case Details (01-Test-Case-Details.jpg)
Note: We are looking for your "User Entry Control" design concepts - provide as many solutions (even beyond the listed pages) during the milestone so we can provide you with useful feedback.
Round 2
Final Design:
- All final screens plus design updates from the Milestone round
Contest Details
Humana and TopCoder (HTC) have teamed up to build cutting-edge applications and design modern user interfaces/user experiences. This is one of several contests looking to solve a user experience/user interface design problem through the Studio Community.
Design Problem
Download the provided screens/graphic files (SQuIDS-Design-Source.zip)
We are looking for better ideas and design solutions for the data entry fields/forms on the provided design.
Look to improve how a user interacts with:
- Dropdowns
- Checkbox and Radio options?
- Dates (note most users like to type in dates - so don't over complicate this)
- Text and Textarea
- Option for lengthy lists
- File attachment and File upload
Solutions need to make sense. Think about the user interacting with the application and what enhancements make sense (what user entry controls that you have used in the past were really cool and useful?)
Design Requirements
- Forms need to be real estate/screen sized appropriate
- Fields should not look cluttered
- Think of limited space for fields and yet the options should show lengthy values
- Need to be keyboard friendly
- Needs to match the "sharpness" and design style of the provided application screens
Things to think about
The provided document (User Entry Controls.docx) have a list of some creative ideas of the things we "like" to help you start an initial direction.
- Some lists (like project, application, and user) are very lengthy, such as more than 300 entries long. We need a fast, easy way to select values from this list, including sometimes a single selection, and sometimes the ability to multi-select
- Some fields are really long, such as application names. The control cannot be made long enough to display it all, but still somehow the entire name needs to be visible when selecting, and available (hover or some other means) to read fully after its selected
- Some controls may be mutli-select on a search, but must be single select on a create form. Need to make sure there are controls to manage both.
- Text areas can be long. Some descriptions are up to 5000 characters. The average is about 170 for test case descriptions, 270 for defect descriptions. Needs to be flexible enough for the extremes to be viewed just as nicely as the norm.
- Today, in the long dropdowns/select boxes, people can create ‘favorites’ so that the lists are short. But they need an expand/see all/… option to expand to see everything and then be able to move through the much longer lists quickly.
Search:
- Type ahead/Auto Suggest is a great feature provided it is flexible
- Users want the ability to be able to search between ranges, items that ‘include’ or ‘start with’, etc.
- There may be many fields in the search section, many more than shown in the storyboard. It would be ideal to limit the height taken by these sections so that a decent number of the results can be seen at the same time, without scrolling and cutting off the search criteria from the results
Search User Scenario Examples
1) Quick User:
Knows exactly what they are looking for and only wants to fill in 1-2 search criteria. Might be the ability to hand-key an exact test case number. Or select a single team. Wants to be able to navigate quickly with the keyboard and move on.
2) Complex User:
Wants to look at subsets of data with unique criteria. This includes use of multiple data filters (includes/between/excludes/etc.) For instance, show me all test cases between 3256 and 3369 that include the word “Home” in the title. Or all defects that were found within the last week that are in any of the open statuses (there are 4).
3) Multi-select:
Search isn’t that complicated, it’s just for multiple selections. Such as a search for 3 applications. Or a search for 4 projects.
Required Contest Screens
- Search Filters used here (02-Test-Case-Search.jpg and 06-Self-Service-Extracts.jpg)
- Test Case Details (01-Test-Case-Details.jpg)
- Test Creation (03-Test-Creation.jpg)
- Self Service Extracts (06-Self-Service-Extracts.jpg)
- Reporting (07_1-Reporting.jpg)
- Focus on the user entry controls
- Show us how a user would click/open/scroll/select etc
- Open the wireframes and view/click around these pages to get a better idea of how to enhance them
Branding Guidelines
- Follow the provided source storyboards/graphics
Target Audience
- Internal Resources
- Potential Customer
Judging Criteria
- Design of your user entry control concepts
- Creative yet efficient solutions
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG/JPEG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.