Challenge Summary
Contest Summary
Welcome to the Radial Menus Control iOS Design Concepts Contest.
Keep in mind this contest is we're going to ask you DESIGN CONCEPT of Radial Menus Controls for iOS by implementing functionality stated more details below.
Design Problem
This contest is to design UX concepts on how the Radial Menus screens might work and look graphically.
Round 1
Let us see your initial solutions of this task:
Design of Radial Menus
Notes.jpg: Any comments about your design for the Client
Round 2
Final Design of of this task:
Design of Radial Menus
Notes.jpg: Any comments about your design for the Client
Design Problem
This contest is to design UX concepts on how the Radial Menus screens might work and look graphically.
Explanation: What is "Radial Menus"?
Radial menus are designed for ease of use, comfort, and intuitive natural motion for hands in the steering wheel positions. The thumbs drive the action requests. This is similar to steering wheels in cars where controls are placed on the steering wheel. This allows the driver to maintain a comfortable driving position without disrupting or moving the placement of the hands.
A radial menu takes the standard vertical and horizontal menus and transforms them into angled arcing menus where the center of the menu resides at the base of the thumb or at the top of the thumb. The radial menus are then placed in the natural location where the thumbs reside on handheld touch sensitive devices; allowing the thumbs to drive actionable requests. This allows users to keep their natural hand hold on the device and still maintain a comfortable experience with the device.
Some Design Ideas for the Admin Application
- Some of the information/data on Radial Menus Controls will be displayed in a longer of texts - think of the extreme situation
- We are open to all new design/colors/concepts!
- You can create your design concept on iPad screens size: 1024 x 768 px
Number your screens and think of the user "click-path" - tell us the user experience story
Radial Menus Control iOS Feature Requests
Screen Layout
- Radial Menus need displayed at 180 and 45 degrees.
- The 180 degrees Radial Menus can placed on the left of right side of screen.
- The 45 degrees Radial Menu can placed on the corner side of screen.
- Radius of Radial menu should not extend beyond 7cm or 2.7".
Radial Menu Component
- It is consist of 2 main component: Level and Arch.
- Level screenshot
- Arc screenshot
Graphic Layout
- When build the Radial Menus later, it need support of 2 graphical layouts "Automatic" and "Manual"
- Automatic : The program calculates the appropriate size and spacing for each component within the radial menu. This allows for a uniform look and feel for the radial menu.
- Manual : Each component within the radial menu must specified by the designer. This allows for maximum flexibility and custom choices.
- On this design concept, you just need design how variations of layout will be:
--- For Automatic, maybe create reduced intensity color from Level 0 to Level 4 (ex: from Dark Red to light red)
--- For Automatic, How calculated spacing?
--- For Manual: How Radial Menu would look when set with different color for every level?
Text Arching Layout
- The radiating layout is where the text alligns along the degree from the center of the the menu.
- Radial menus icons and text are displayed in an arcing or radiating layout.
- The arcing layout is where the text bends with the arc of the radius around the center of the menu.
- How your design anticipate long or short texts?
- How text arching looks on every Level and Arc?
Action
These actions apply to both levels and arcs unless specified.
Automatic Retraction
- Automatic retraction is when the user moves their finger off a radial menu component, while remaining in contact with the screen, and then the component disappears.
- We need design how Radial Menu looks after Automatic Reactions happens?
- Any animation/effect?
- Suggest us any ideas.
Sticky Placement
- Sticky place is when the user removes their finger from a radial menu component, remaining in contact with the screen or not, and the component is preserved on the screen.
- When the finger is lifted off the radial menu or travels beyond the radial levels, then the radial menu is preserved in its last known state on the screen.
- When the finger is moved from a child level to a parent level, the child level is preserved on the screen.
- When a finger moves from one arc to another arc, the previous arc’s child level is removed and the new arc’s child level is displayed if the arc has a child level.
- Each of these actions is unique and configurable. Meaning any combination of these actions can be applied to specific levels and/or arcs.
Dial/Rotate
- Not all arcs can be displayed on the screen at the same time. In order to select an arc, the level needs to be able to rotate around the parent arc clockwise or counterclockwise exposing arcs onto the screen and the level is rotated.
- How your design capture this?
- Any indicator when Radial Menu rotated?
Highlight
- When a component is selected, the component is highlighted with a different image, text, background color, or trim color.
- Show us how highlighted stated gonna looks?
Magnify
- When a component is selected the component is enlarged.
- For level magnification, the entire level ring is enlarged over adjacent levels.
- For arc magnification, the arc is enlarged over adjacent levels and arcs.
- The arc’s enlargement will not completely cover over the adjacent parent and child levels or the adjacent arcs
- Show us how the Radial Menus magnify presented?
Entrance and Exit
Entrance and exit is how a level appears or disappears from the screen. Here are entrance and exit schemas:
- Immediate on.
- Immediate off.
- Rotate clockwise.
- Rotate counterclockwise.
- Sunrise.
- Sunset.
- We need you create separate screen to show those effects on your design concept
Collapsing
- Once a level goes beyond a set radial size, the oldest parent level (not including level zero) is removed from the screen reducing the radial menu radius by one level.
- When a level is displayed beyond the natural length of the thumb, the level can be placed on the screen with reach of the thumb.
- When a level was collapsed and the child level is removed, the parent level that was removed is restored.
Constrain
- A level can be constrained in position from a starting degree to an end degree.
- For example, if a parent arc ranges from 20 degrees to 45degrees and have a child level, then the child level could be constrained between 20 degrees to 45 degrees also.
Call
- A call is an execution to an external function beyond the radial menu.
- Example: Another example is when an arc that represents the action “Save” is selected, the menu invokes an external call to a user defined function to save a state in the application/work.
- There can be multiple calls per component. As an example, a component could load an image, play a sound, and change the radial menu behavior.
- On this task, we need your help create some way indicate button that triggered action out of Radial Menus.
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User
- Potential User
Judging Criteria
- How well you create the Radial Menus design and think about the user experience - focus on the design concepts!
- Simple and elegant graphics and design
- Easy to use by user.
- Possible to build on iOS platforms.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (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.