My learning process in the field of interface design
Since I graduated from university in June 2013, I have worked for two years and three months. In one year and three months, I contacted the interface of car and TV at ASUS. Worked in Alibaba for six months, focusing on Tmall Mobile APP; I will spend half a year in my friend’s new creative team in charge of design.
In the blink of an eye, 2015 is coming to an end, and I want to summarize the process of this work.
I’m allowed to use it
Visual designer(Visual Designer) to write.
* Mixed with Chinese characters, if the translation is not appropriate, English will be added.
Describe the work of product interface design
Input and Output
Interface is the virtual and real information exchange way, so that people and digital communication.
- Use visual communication knowledge: visual design for different media, including text typesetting, color matching planning, button ICON, dynamic design, style establishment and maintaining the consistency of the overall image.
- Understand the characteristics of media devices: they may be mobile phones, tablets, computers, TV screens or even wearable devices, with different limitations and system specifications.
- Have the concept of information architecture: consider product functionality, process, and hierarchy.
- Understanding interaction and human factors science: Drawing user portraits for problems, observing user behavior, triggers, manipulations, interviews and usability tests, prototyping products.
- Focus on user research: Understand target users, collect data to gain insight into real needs and potential users.
- Good at communication and understanding of each position: first understand PD/PM needs, then understand IxD logic, let RD understand the drawing, and finally convince the boss with the finished product… .
PD,PM: Product Design or project Manager/IxD: Interaction, Interaction Design/RD: R&D Engineer/VD: Visual Design
Visual specification
The traditional advertising era extends from CIS to Brand Guidelines of enterprises, and APP will also have Guidelines in the digital era
Uber Brand Guide[1] /
IBM Design Language[2] /
Medium UI Style Guide[3]
In the experience of Tmall [4], because the product structure is too large, lines, buttons, lists, ICONS, colors and font collocation must be summarized and sorted out. Not only the manual of visual specifications is written, but also the interface must be modular in programs and CSS.
On the one hand, to maintain the unity of style and experience, and on the other hand, to reduce the drudgery and waste of resources of repeated production and improve efficiency.
The challenges of producing a design specification:
1. Interaction designer: Considering various situations, plan reasonable and extensible interaction logic (clarify usage principles and interface modularization).
2. Visual designer: consider legible, recognizable, universal and beautiful, fill in visual elements consistent with product image (‘IxD’ above and ‘RD’ below is a sandwich cake).
3 program designer: modular implementation and reduction degree, the function is not finished, but also to follow you to carve the interface. And keep up with the pace of specification updates… It’s painful, isn’t it?
4. Promotion, update and acceptance: It is already difficult to convince designers with a set of standardized specifications, which should be strictly observed.
In a advocate “embrace change” as the core value of a big company work is a race against time, usually two weeks after the new features to online, prior to page design still have to read a thick specification, found here do not apply where there is a problem, must put forward the update immediately, and check before online program interface reduction degree.
A good design specification can
Keep pace with The TimesAnd all of them
maintenancewith
To promoteTo play it out
The most value.
When I worked in Tmall, I was asked to revise the design specification of Mobile and compare it with taobao. Regardless of the possible politics behind it, back to the design itself. Even if users are used to taobao’s usage mode and make changes in order to reduce users’ learning costs, is what we are doing Follow or just rough Copy?
Designers should learn efficiency, not laziness; We think, not just do what we’re told. I wrote about my introspection and doubt in the weekly newspaper, and one of my programmers replied:
“It may be true that mobile shopping cultivates a user’s mental model of shopping. However, I think this model should be of a higher level, such as shopping process or settlement process, rather than specific UI elements and interaction details. If a user is accustomed to using a page by hand, he may expect the same function, operation mode or use process when using another APP. But not expect interface style, the position of the button, all similar? If so, then all the pages of the electricity are the same, what is innovation? Qi baishi said: to learn I was born, like me is dead. There Tmall client value should be at the it with hand for a different place, if the same, it is not necessary.”
Under the pressure of rapid iteration and business demands, do we have room to think about whether the design language can embody the brand spirit and even create a good experience?
Device features
After exposure to mobile phone screens, in-car devices, and TV entertainment and understanding the differences between different media, the use of car tablets is definitely different from home; Cell phone screens are much smaller than TV screens; With a variety of controls and inputs (hand, voice, remote control, motion control), do we know enough about the features and limitations of the device? Mobile phones should pay attention to the size of mainstream models. The same screen should be zooming in and out in different sizes than being presented. More importantly, the design specifications are more important. If you have enough time and budget.
Design specifications for mainstream systems:
Google Material Design[5] /
iOS[6] /
Universal Windows Platform[7]
Platform APP screen comparison:
iOS vs Android[8]
IOS back button in the navigation bar; Android has its own entity return button; WP is on the lower left. IOS Tab bar is at the bottom; If there are too many tabs, change to the Navigation drawer on the side. WP suggested that the mobile version be placed at the bottom, but did not consider the possibility of fighting physical buttons. IOS has Force Touch, Android has Long BlockQuotess… etc
Information architecture
Know where users are coming from and where they are going; To clarify the productvein, define,function, classification and organizationmessage, planning,The hierarchy.
Information Architecture is
User + Content + Context[9]
Specific output:
- Functional Map
- Process sheets (Flowchart)
- Wireframe Layout (Wireframe/Layout)
- There was a Mockup of… I was responsible for the visual draft 😛
- Prototypes are usually used for vendor demos or early user testing, and high-precision prototypes are rarely used for intra-team communication
- PD/PM usually issues requirements/schedules to IxD for evaluation in the early stage.
- The IxD planning process will discuss with PD, VD and RD to finalize the plan, and then design the Layout interactive draft. Besides fulfilling PD requirements, the IxD planning process will discuss with PD, VD and RD to finalize the plan(Sometimes not necessarily to solve user problems)RD also needs to be evaluatedProgram implementation possibilities and schedule controlVD strikes a balance between interaction and programming and gives play to creativity 😛
- After the completion of Layout will be thrown to VD, RD at the same time, so that in the visual design at the same time, the program can also start to develop functions.
- Finally, the UI visual draft determined by the visual program is restored to the interface.
Interaction design
Real people exchange information with the machine, and finally get the feedback from the machine.
Perhaps before we can talk about Interaction, we need to define what this term means: human-computer Interaction attached to technology? Or Social interaction constructed by psychology, human beings and sociology? Or the blurring of the line between the two with the popularization of network technology and Service design?
Service design[10]I prefer to be a consultant management company. Compared with solving the problems of a single product, I emphasize the integration and the strategy design of the overall service process, which cannot be divorced from the customer experience and service theory.
Interaction designers are good at exploring problems and observing phenomena. Through quantitative investigation and analysis of Target users, they portray Persona to simulate users, establish scene simulation scenarios, and finally build product prototypes to make logic close to the User’s Mental Model. Then, through a series of Usability Testing and interviews, the product is revised.
CIID[11]Copenhagen Academy of Interactive Design, please refer to the courses offered by specialized schools.
User survey
Precision killing. Let’s dissect the user’s brain.
The observation and quantification of preliminary research is aimed at creating products that meet users’ needs, revising product routes, reducing risks and establishing measurable standards with each interview. Originally wanted to write under the interactive design, but due to the era of big data can be applied more and more widely, each company has gradually independent use and research team.
Twitch CEO Emmett Shear: How to do user research in the early stages of a product?[12]
In the later stage, there will be BI analysts and data mining. The former is responsible for analyzing statements and judging trends and problems, while the latter requires people with machine learning and statistics background to build a data platform and use model methods to answer various questions: the pros and cons of ex merchants, the quality of goods, how much can be sold… etc
Data can display traffic, CTR, conversion rate, transaction volume, stay time, filter user behavior, track user feedback, cross-reference, trend prediction, personalized recommendations… Etc finally exports the decision plan as the basis for revision and update — and then carries out verification, A/B testing, etc.
Although there are many analytical methods, sample bias and selective misdirection may make people misunderstand numbers. Sometimes we get so focused on numbers that we forget that experience is emotional. (Marketing, please return to your humanity.)
Data is a powerful tool for quantification, science, evidence, marketing — and for people to speak up.
UED
If design is not based on reality and humanity, then UX is meaningless.
UED Group is generally divided into three types of positions:
- Visual Designer
- Interaction Designer
- User Researcher/User Experience Research
If we want to illustrate the core value of UED, we should say:
We exist to create user-centric products. Our creation and research constitute the overall “User Experience Design” to improve usability
UsabilityTo meet or even exceed users’ expectations
Expectations, with the goal of creating enjoyable experiences.
B: Oh, and generate business value.
When you have a product that’s not just a Mobile APP, but a huge and complete service system behind it, hundreds of millions of dollars, users, business activities, and it really permeates real life, it’s not just about what’s on the screen.
If the UED is the department closest to the users, is there the best opportunity for insight to create value that makes a difference?
User, Need, Scenario.
Function, Affordance, Expectations.
Intuition, Sensibility, Emotional.
Experience, Happiness, Real.
Afterword.
On this day last year, at this time, I got a lot of inspiration; We won one of the first rounds of the Intel Make It Wearable Creativity competition and were invited to San Francisco as the final audience.
The ten Finalists are focused on medical care, early childhood, sports, navigation, manufacturing, outdoor photography, modular watches, etc. You can see Finalists Video[13] here.
NIXIE[14] won the first prize of $500,000. The outdoor boomerang camera, which is based on a four-axis aerial camera, can be used by a person to climb over mountains. The prototype on site can fly back automatically, yes, but it is still quite difficult to put it on your hand in a DEMO film.
For outdoor use, power needs to be maintained. Today’s small air racemakers can’t fly for long and can’t be too heavy to wear on your hand, so the weight and volume of the battery can be a big technical challenge.
The second prize was Open Bionics[15]. Their speech moved me very much, with stories, emotions, caring society and medical treatment. Using 3D printer to create inductive mechanical prosthesis has lower cost compared with traditional medical prosthesis and is completely open source. The picture on the right shows their COO taking out a small model to communicate with everyone about XD during a break on site
The third place is Proglove[16], which I think is very powerful. For gloves used in production and assembly, attention messages are transmitted to users through various senses to reduce errors. Even tell you whether the tools you have are right or wrong in the process and so on. It is a team from Germany.
I really wanted to go back to school, like new media or interactive design; No matter creating pure interactive installations or exploring the possibilities of interaction between human beings and technological products, THE more I go, the more I feel the lack of knowledge about design, theory, economy, humanities and society.
I have many people to thank for stepping into this field: Gin, head of ASUS, Parks at the Design Center who inspired me a lot, Eva at Ali. Besides, the former leader Sanke said to me, an overly sensitive child, that blunt sense is also very important 😛
There are many colleagues and predecessors who have influenced my vision and ideas, and it is hard to enumerate them. In a word, I will continue to work hard in 2016. Please give me your advice.
* If you have any questions or suggestions, please feel free to send them to me [17]. Thank you.