UI/UX for responsive designs Innovation
COURTESY :- vrindawan.in
Wikipedia
Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.
A responsive design adapts the web-page layout to the viewing environment by using techniques such as fluid proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
- The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
- Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
- Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, e.g. width of the rendering surface (browser window width or a physical display size).
- Responsive layouts automatically adjust and adapt to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.
Responsive web design became more important as users of mobile devices came to account for the majority of web site visitors. In 2015, for instance, Google announced Mobile geddon and started to boost the page ranking of mobile-friendly sites when searching from a mobile device.
Responsive web design is an example of user interface plasticity.
Mobile-first design and progressive enhancement are related concepts that predate RWD. Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice was to create a basic web site and enhance it for smartphones and personal computers, rather than rely on graceful degradation to make a complex, image-heavy site work on mobile phones.
Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns. He suggested that, compared with a simple HWD approach, device experience or RESS (responsive web design with server-side components) approaches can provide a user experience that is better optimized for mobile devices. Server-side CSS generator implementation of style sheet languages like Sass can be part of such an approach. Google has recommended responsive design for smartphone websites over other approaches.
Although many publishers have implemented responsive designs, one challenge for RWD adoption was that some banner advertisements and videos were not fluid. However, search advertising and (banner) display advertising came to support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices. Different landing page URLs have been used for different platforms, or Ajax has been used to display different advertisement variants on a page. CSS tables permitted hybrid fixed and fluid layouts.
There have been many ways of validating and testing RWD designs, ranging from mobile site validators and mobile emulators to simultaneous testing tools like Adobe Edge Inspect. The Chrome, Firefox and Safari browsers and developer tools have offered responsive design view port resizing tools, as do third parties.
The first site to feature a layout that adapts to browser view port width was Audi.com launched in late 2001, created by a team at razorfish consisting of Jürgen Spangl and Jim Kalbach (information architecture), Ken Olling (design), and Jan Hoffmann (interface development). Limited browser capabilities meant that for Internet Explorer, the layout could adapt dynamically in the browser whereas for Netscape, the page had to be reloaded from the server when resized.
Cameron Adams created a demonstration in 2004. By 2008, a number of related terms such as “flexible”, “liquid”, “fluid”, and “elastic” were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009. Ethan Marcotte coined the term responsive web design—and defined it to mean fluid grid / flexible images / media queries—in a May 2010 article in A List Apart. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1.
Mashable called 2013 the Year of Responsive Web Design.
The user experience (UX) is how a user interacts with and experiences a product, system or service. It includes a person’s perceptions of utility, ease of use, and efficiency. Improving user experience is important to most companies, designers, and creators when creating and refining products because negative user experience can diminish the use of the product and, therefore, any desired positive impacts; conversely, designing toward profitability often conflicts with ethical user experience objectives and even causes harm. User experience is subjective. However, the attributes that make up the user experience are objective.
According to Nielsen Norman Group, ‘user experience’ includes all the aspects of the interaction between the end-user with the company, its services, and its products.
The international standard on ergonomics of human-system interaction, ISO 9241, defines user experience as a “user’s perceptions and responses that result from the use and/or anticipated use of a system, product or service”. According to the ISO definition, user experience includes all the users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during, and after use. The ISO also lists three factors that influence user experience: the system, the user, and the context of use.
Note 3 of the standard hints that usability addresses aspects of user experience, e.g. “usability criteria can be used to assess aspects of user experience”. The standard does not go further in clarifying the relation between user experience and usability. Clearly, the two are overlapping concepts, with usability including pragmatic aspects (getting a task done) and user experience focusing on users’ feelings stemming both from pragmatic and hedonic aspects of the system. Many practitioners use the terms interchangeably. The term “usability” pre-dates the term “user experience”. Part of the reason the terms are often used interchangeably is that, as a practical matter, a user will, at a minimum, require sufficient usability to accomplish a task while the feelings of the user may be less important, even to the user themselves. Since usability is about getting a task done, aspects of user experience like information architecture and user interface can help or hinder a user’s experience. If a website has “bad” information architecture and a user has a difficult time finding what they are looking for, then a user will not have an effective, efficient, and satisfying search.
In addition to the ISO standard, there exist several other definitions for user experience. Some of them have been studied by Law et al.
Early developments in user experience can be traced back to the Machine Age that includes the 19th and early 20th centuries. Inspired by the machine age intellectual framework, a quest for improving assembly processes to increase production efficiency and output led to the development of major technological advancements, such as mass production of high-volume goods on moving assembly lines, high-speed printing press, large hydroelectric power production plants, and radio technology to name a few.
Frederick Win slow Taylor and Henry Ford were in the forefront of exploring new ways to make human labor more efficient and productive. Taylor’s pioneering research into the efficiency of interactions between workers and their tools is the earliest example that resembles today’s user experience fundamentals.
The term user experience was brought to wider knowledge by Donald Norman in the mid-1990s. He never intended the term “user experience” to be applied only to the affective aspects of usage. A review of his earlier work suggests that the term “user experience” was used to signal a shift to include affective factors, along with the pre-requisite behavioral concerns, which had been traditionally considered in the field. Many usability practitioners continue to research and attend to affective factors associated with end-users, and have been doing so for years, long before the term “user experience” was introduced in the mid-1990s. In an interview in 2007, Norman discusses the widespread use of the term “user experience” and its imprecise meaning as a consequence thereof.
Several developments affected the rise of interest in the user experience
- Recent advances in mobile, ubiquitous, social, and tangible computing technologies have moved human-computer interaction into practically all areas of human activity. This has led to a shift away from usability engineering to a much richer scope of user experience, where users’ feelings, motivations, and values are given as much, if not more, attention than efficiency, effectiveness and basic subjective satisfaction (i.e. the three traditional usability metrics.)
- In website design, it was important to combine the interests of different stakeholders: marketing, branding, visual design, and usability. Marketing and branding people needed to enter the interactive world where usability was important. Usability people needed to take marketing, branding, and aesthetic needs into account when designing websites. User experience provided a platform to cover the interests of all stakeholders: making web sites easy to use, valuable, and effective for visitors. This is why several early user experience publications focus on website user experience.
The field of user experience represents an expansion and extension of the field of usability, to include the holistic perspective of how a person feels about using a system. The focus is on pleasure and value as well as on performance. The exact definition, framework, and elements of user experience are still evolving.
User experience of an interactive product or a website is usually measured by a number of methods, including questionnaires, focus groups, observed usability tests and other methods. A freely available questionnaire (available in several languages) is the User Experience Questionnaire (UEQ). The development and validation of this questionnaire is described in a computer science essay published in 2008.
Higher levels of user experience have been linked to increased effectiveness of digital health interventions targeting improvements in physical activity, nutrition, mental health and smoking.
Google Ngram Viewer shows wide use of the term starting in the 1930s., “He suggested that more follow-up in the field would be welcomed by the user, and would be a means of incorporating the results of user’s experience into the design of new machines.” Use of the term in relation to computer software also pre-dates Norman.
Many factors can influence a user’s experience with a system. To address the variety, factors influencing user experience have been classified into three main categories: user’s state and previous experience, system properties, and the usage context (situation). Understanding representative users, working environments, interactions and emotional reactions help in designing the system during User experience design.
Single experiences influence the overall user experience: the experience of a key click affects the experience of typing a text message, the experience of typing a message affects the experience of text messaging, and the experience of text messaging affects the overall user experience with the phone. The overall user experience is not simply a sum of smaller interaction experiences, because some experiences are more salient than others. Overall user experience is also influenced by factors outside the actual interaction episode: brand, pricing, friends’ opinions, reports in media, etc.
One branch in user experience research focuses on emotions. This includes momentary experiences during interaction: designing affective interaction and evaluating emotions. Another branch is interested in understanding the long-term relation between user experience and product appreciation. The industry sees good overall user experience with a company’s products as critical for securing brand loyalty and enhancing the growth of the customer base. All temporal levels of user experience (momentary, episodic, and long-term) are important, but the methods to design and evaluate these levels can be very different.