Interactive Design of Responsive Multi-Device User Interfaces
Publication Date: 2014-Jul-23
The IP.com Prior Art Database
This article tries to address the problem of rapid and low effort design of responsive user interfaces for multiple devices with different form factors; responsive designs adapt gracefully to different devices making it easy for the user to view and navigate the page contents and interact with the application on all device sizes. Existing solutions require deep knowledge of responsive design patterns and/or HTML/CSS technologies and provide a restricted set of responsive patterns. They require the designers to put in lot of manual effort to adapt a particular UI to multiple device sizes. Teachings of this article allows the designer to collaborate with an automated tool to develop responsive designs. This reduces manual effort significantly and requires little or no knowledge of HTML/CSS and various responsive design patterns or frameworks.
Page 01 of 7
Interactive Design of Responsive Multi -Device User Interfaces Creating Responsive Designs
Developers obliged to create apps which look good across platforms and devices.
But, they don't want to redesign them for each device
Draw a design mockup with UI widgets ONCE!
From the initial design, a layout compiler will generate multiple designs interactively which look good on devices with different form-factors
What is a Responsive Design?
A design which adapts to devices of different form factors
Page 02 of 7
Provides optimal viewing experience
• easy reading and navigation • minimum of resizing, panning, and scrolling
• To adapt a given UI design (mockup) for a particular form factor, we may need to transform UI elements in the following ways
• Rearrange • Resize • Replace • Change appearance or visibility
• Move across pages, etc.
• Grid-based responsive layout CSS library • Twitter Bootstrap, Zurb foundation • Drawbacks:
• Learning curve for CSS and framework-specific responsive design features (in our case, designer uses only direct manipulation)
• Fixed responsive patterns for individual widgets and simple containers; designer must map arbitrary hierarchical designs to those patterns
• Tools: Adobe Edge Reflow, LayoutIt, Accelsor
• Drawbacks - Designer explicitly adjusts the designs for each form factor. Manual effort and deep knowledge of responsive design required.
Page 03 of 7
Designer draws an initial design for form-factor F1, e.g., width: 1200px. Specifies that he wants to use the tool to generate designs for two other form factors, e.g., F2 = 640px and F3 = 320px width.
Use Case 1: (Hands-off operation with some fine-tuning)
- Designer clicks the generate button and the layout tool generates designs for the F2 and F3.
- Designer points out not-looking-good elements for F2 or F3. Tool proposes a set of fixes, user picks one of them.
Use Case 2: (Fine-grained, controlled design process)
- For F2, Designer asks the tool to suggest a set of fixes. On being presented a set of fixes, the designer picks a fix, applies it and asks the tool for the next round of suggestions. Repeat for eachof the other form factors.
Fix: basic unit of...