Web design: A responsive design process for complex products

All say 2013 will be a year of response-style design outbreaks. Amoy design team in last year, a first revision of the home page to try the response, recently in a Amoy "play Guest" project has a more in-depth application, the first time in complex products to achieve a full station response. Some experience in the middle has also stepped on a lot of pits, so there is this response-style design trilogy, this series of articles contains ideas, knowledge and process chapter.

Unlike traditional Web pages, responsive pages are just a matter of thinking about a state, not delivering a set of design drafts, and it brings new challenges to the collaborative pattern between design, front-end, and development teams. In a complex product comprehensive response project, what is the output for each phase of the interaction? How does interaction interact with vision? When does the front end intervene? What makes backend development more reasonable? After the first edition of "Play Guest", we got some answers.

Responsive design is called responsive "design" rather than responsive "technology" because it is a design-first effort. Need to design a clear response to achieve the first, not a set of design draft waiting for the front end to look at the situation to turn it into a responsive web page. So the whole process begins with the interactive phase, dividing into 6 main steps, and the roles of vision, front-end, and development are involved as early as possible.

　　STEP1: Information architecture, determining content policies.

Based on product positioning and user analysis, the interaction designer determines the site information architecture. (There are many types of information architecture presentation, which is not the focus of this article, not detailed).

This makes it clear how many pages the product has, how much content each page contains, and what the content priority is. Many products contain more than n pages, each page one by one consider the response design is easy to create confusion and cost. So the next important task is to analyze page types and categorize the pages. To play the customer as an example, you can divide more than 10 pages into three categories: List Class page, details Class page, Operation Class page.

　　STEP2: Mobile Frame

Let's say why the second step is to design the mobile frame first. Mobile priority is the concept that came into being under the mobile internet wave, which was first proposed by Luke Wroblewski. Mobile priority does not mean that the mobile is more important, the response design concept of equipment is equally important. It refers to the first design of the phone-side experience, for three reasons:

Mobile phones let design focus, forcing you to think clearly what information is the most important. Because the cell phone screen is small, each screen presents less content, touch-screen mobile phone use finger operation rather than the mouse such precision equipment to operate, the operation has a higher demand; mobile phone use of more rich scenes, many scenes users are impatient, such as when you queue to see the film is looking for the phone on the electronic ticket, I'm going to get you in a minute, but I can't find the ticket. This is such a collapse.

Many features of mobile phones make design more powerful. Voice input on the phone, location, rich gesture operation, more and more sensors, mobile phone interaction than the PC has more possibilities. Starting with your phone design allows you to think earlier about how to play with these features.

Mobile phones are growing fast. Mobile phone is about to surpass PC, become the most mainstream way of surfing the internet, this trend is irreversible.

Designing from a mobile design may be a challenge for a designer who is accustomed to a PC environment, and the way work habits are forced to change. But this change has to be adapted because the user habits are changing.

Back to the point, the previous step has the page classification and determine the priority of each page content, and now then analyze the navigation of each type of page, the main content, such as frame structure, and finally come up with a frame structure table. From the frame structure of the player see, Global navigation is all the public, local navigation only list class page, details Class page has a "page owner" information, and associated navigation is not every page has.

Then began to design the mobile phone end of the "Super Slender page" framework (because the phone is generally a single-column layout, so the page is thin and long). This step begins to design the information structure into the most extensive framework that can be done on a whiteboard or on paper. The key goal to achieve is to put this page in the most important content to the user, to meet the mobile phone reading and operating habits, try to take advantage of the characteristics of mobile devices.

　　STEP3: Responsive Framework

Develop a flat and PC-side framework based on the handset-side framework. This is a critical step in complex product implementation response design, which is the basis for many pages to be organized and responsive. The first thing is to determine the response pattern, from mobile phone to tablet to PC, how navigation changes, how the page layout responds, how to adjust the module order according to the content priority, and so on. Players in the PC end of the three-column layout, the left column as a local navigation or host information area, the middle column is always the main page information, when the page needs to be associated with navigation unified in the right column.

To this stage all the pages of the response began to have rules to follow, the next step is to continue to refine the rules, the frame to the exact size. Specifically, the development of a fluid grid system. The fluid grid system is based on the percentage of raster layout tools, the specific method will be introduced in another chapter "knowledge chapter" in detail.

Response is a new form of design concept and front-end technology, which encourages cross functional communication and collaboration as early as possible. Once the response framework and grid system are identified interactively, other roles can work synchronously. The front end begins by intervening to complete the grid and frame the output page base frame. Visual synchronization began to explore and define visual style exploration, the development of visual framework, output style keyword, product color scheme. The whole process requires several roles to be discussed and determined.

　　STEP4: module Design

According to the principle of mobile priority should be the mobile end of the module details design, but we chose to start from the PC side design details. Because PC-side development can fully expose the complexity of the business, project team design, development, testing in the PC environment with sophisticated tools and processes, starting from the PC to make the development process smoother. Therefore, the individual believes that mobile priority is to determine the content strategy should be followed by the concept of detail design and development process to move first, depending on product positioning and project team situation.

The response framework identifies the page structure and response patterns, and the process of module design begins to refine all information typesetting and interaction forms, which is the most skilled and time-consuming task for interaction designers. This process is not much different from the traditional process, just keep reminding yourself that this module is not only designed for this device, it will be under the other device problems?

By interacting with the page module details, you can extract the controls, components, and public modules that are used by the product, and now the vision and front end begin to do something different from the traditional process. Vision based on the previous definition of the style of design control components and the visual effects of public modules, put them into a simulated page, we call it style collage. The front end of the style of the collage of the control components and public modules to achieve a unified maintenance of a set of component code.

The traditional approach is often the final page vision after the designers began to organize visual specifications to the front end. Style collage is to make this work as early as possible and become a design collaboration tool. The benefits of this are:

1, a page of visual effects is actually composed of a heap control components and public modules, with the real control components and public modular collage of the simulation page has been able to show the product's visual style. It is a time-consuming and laborious task to finalize a visual copy of more than 10 pages of a product, and it is much easier to produce a style collage. So it's an efficient design tool.

2, the complex product always involves many designers and the front-end parallel work, as soon as possible the control component and the public module pulls out the unified management, is guarantees the visual style consistency the effective method. Avoid different designers at the same time design the same control components or public modules, reduce the waste of repeated development. Also greatly reduce the cost of late updating and maintenance of the page, for example, when you need to modify the "Attention" button, you can only change the whole station to take effect.

　　STEP5: Design of response module

PC-side page module details and style after the completion of the collage, the remaining work is to expand the flat and mobile phone end of the complete design, front-end output full response page code. The most need to focus on the response module design is to make the operation conform to the equipment habit and make full use of the equipment characteristics.

At this point, a whole-station response-type product page will be out in succession. Many people think that the reason for the high maintenance cost of responsive design is that a page should design multiple sets of designs at the same time. This experience tells us that a set of design draft and grid system to expand the design of other devices, the workload is far lower than expected.

　　STEP6: Testing & Discussion & optimization, submitting development

Not yet. The final step is to test the page effect under the real device, and the project team discusses and continues to optimize.

You need to explicitly define the service-side response (RESS) strategy as early as possible before committing to development. The combination of server and client is the most reasonable solution to solve the problem of response page performance at present. Which large pictures can only output small size pictures under mobile devices? What is the content that does not need to be developed for output under what device? What can reduce the amount of data that is output? The response to collaborate with the development team can effectively control the paging file size and prevent the page from becoming the culprit for burning user traffic on mobile devices.

After the test passes, the submission page enters the development link. We have summarized a response page test checklist from both usability and accessibility, and the test essentials include but are not limited to the following. Welcome to Add.

　　Conclusion

The above process is our team to complete a total station response project after the collective conclusion, whether you are interested in the response, is doing the response, or is about to start to do the response, I hope to help you.

I am in #ixdc2013 China Interactive design Experience Week # will host a "cross-PC and mobile Interactive Design" workshop, with a wealth of content and combat in response design, and a discussion of the design of multiple device linkage interactions.

Time: June 23 09:00-12:00, looking forward to communicate with you in Hangzhou.