Original article, reproduced please specify: Reproduced from Keegan Small Steel

And indicate the original link: http://keeganlee.me/post/practice/20160814

Wechat subscription number: keeganlee_me

Written in the 2016-08-14

Road of App Project actual combat (I): Overview

Road of App Project combat (II):API chapter

Road of App project actual combat (3): Prototype

The road to App project combat (4):UI

Originally, I had no intention of writing a prototype article, but considering the number of product dogs who follow me, more importantly, I have always believed that programmers who don’t understand product design are not good product managers. Also, there should be plenty of programmers who want to become product managers. So, finally decided to embarrass.

Prototyping tool

Prototyping starts, of course, with the tools. Axure PR is probably the most powerful tool for prototyping, but it’s not easy to get started. For me, who wanted to develop a prototype quickly but didn’t have the time to learn design tools, Axure wasn’t for me. Fortunately, there are design tools that are easy to use.

POP – Prototyping on Paper

POP is a simple App that takes a picture of a rough prototype with your phone, then starts editing which areas of the prototype (like buttons) link to which page, adds jump links, and turns it into a demonstrable interactive prototype.

POP doesn’t provide any UI components for designing a prototype, just the ability to set up any clickable area on an image and add links to other pages (essentially, another image). This App is perfect for those who start their design from scratch.

Of course, the limitations are obvious. First, the prototype diagram can only be done in other ways. Second, interactions are very limited and can only be implemented between pages. Other interactions, such as within the same page, are excluded. Finally, it only works with App prototypes.

The ink knife

Ink Knife is an online prototyping tool that’s easy to get started with, and the site also offers tutorials. Ink Knife is much more powerful than POP, supporting not only mobile App prototyping, but also tablets and the web. The prototype of this project is designed with ink knife.

The first advantage that attracted me to ink Knife is that it offers a lot of convenient component libraries. There are individual components such as text, buttons, images, ICONS, input fields, singletons, multi-check boxes, switches, title bars, search bars, labels, and so on, which are convenient to use with one drag. Especially ICONS, ink knife provides many commonly used ICONS, very convenient. In addition to individual components, ink knife also provides master and combination. The default master has a rotation chart and drop down menu, default combination of pop-up boxes, list items, Action Sheet, calendar, etc., are a drag and use. If not, you can also customize new masters and combinations.

The second advantage that attracts me to ink knife is that the attribute Settings of components are relatively complete. Take button, for instance, can set the background color, the foreground and the borders, shadows, high transparency, position, width and rotation Angle, radius, round or square, you can also set button text attributes, including the text background color, text color, font size, font style, shadow, alignment, and finally, also can set the button icon, But ICONS can only be left of the text and cannot be repositioned. With these attributes, it’s easy to design components to your liking, and components can be made almost as close to the final UI as possible, which is a high-fidelity prototype.

It should be noted, however, that I do not recommend that product managers prototype in hi-fi. Except in rare cases, such as a prototype that needs to be demonstrated to senior management or customers; Or a lack of experienced UI designers on the startup team, or even none at all. Or maybe it’s a solo developer like me who has to do everything on his own. In general, you only need to complete a low-fidelity or medium-fidelity prototype.

The third thing that appeals to me about ink knife is that it has very good support for interaction. In addition to supporting page – to – page interaction, ink knife supports page – to – page interaction. Furthermore, interactions within a page are not achieved by copying the page, but by adding multiple different states to the same page to switch states. For example, clicking the plus button in the lower right corner of the home page slides two child buttons above the plus button, and the plus button itself rotates into a closed cross; Click again, and the two child buttons slide back below, and the cross rotates back to the plus sign.

However, the free version of Ink Knife does not support export or collaboration, and image storage cannot exceed 100 MB. Fortunately, sharing is supported. Others can view the working prototype by sharing a QR code or sharing a link.

Mockplus

Mockplus is also a great tool for rapid prototyping, providing as many component libraries and icon libraries as Inkknife, if not more. It’s just as easy to get started.

However, Mockplus doesn’t encapsulate some common components as well as The Ink Knife. For example, the title bar can’t set titles directly, the TAB bar can’t set images directly, there’s no way to set round images, and text buttons don’t support adding ICONS.

Mockplus is also inadequate in terms of interaction, as the in-page interaction design can only copy the page without ink knife. Mockplus also has the concept of state, but it’s not page state, it’s component state, but right now I only see state Settings for button components, which can be set to normal, selected, and focus.

Other tools

In addition to Axure PR and the three mentioned above, there are many other design tools, such as Balsamiq Mockups, used by former colleagues and I love its hand-drawn style. Mockups is not free, but you can try it. Of course, there are cracked versions available online.

Some people also suggest using Sketch for prototyping. There’s no denying that Sketch can be used for prototyping, as can PHOTOSHOP, AI, etc. As for interaction, annotations are fine. But these tools, to be precise, are better suited for UI design than prototyping. Prototyping is all about being able to see things quickly, not just the interface, but the interaction. Using UI design tools to do, one is difficult to achieve fast requirements, two is the interaction effect is equal to no.

Before prototyping

Before I start prototyping, there are a few things I need to say.

First, decide whether your prototype is intended for UI designers, developers, bosses or clients. Different audiences determine how far prototyping needs to go. In general, if the audience is A UI designer or developer, the most you need is a mid-fidelity prototype; If the audience is a boss or client, a hi-fi prototype with more visual detail may be needed.

Secondly, we should sort out the functional requirements. When sorting out functional requirements, we should focus on core functions and try to do subtraction rather than addition.

As an example of my project, I had a requirement to set a technical label for my App. Now let’s do the addition. First, technology tags can be divided into three broad categories: mobile, front-end, and back-end. Then, mobile technology labels include Android, iOS, Windows, and React Native. Android can be divided into Java and Kotlin based on language, while iOS can be divided into Objective-C and Swift. Front-end tags can be HTML, CSS, JavaScript, React, AngularJS, Vue, and more. Back-end tags can be added more, MySQL, MongoDB, Redis, etc., Java, PHP, Golang, Python, Node.js, etc., and others like Nginx, Docker, Spark, Spring, etc. It’s too much to include all the technology labels. So, let’s do subtraction. There are only three tags: mobile, front-end, and back-end. Why is that? Because the initial number of users will not be a lot, the content generated will not be too much, there is no need to divide so many labels, three categories of labels are enough to meet the needs.

For another example, our company is preparing to make a new financial product. The time is tight, and the core function is only one, that is, to realize transactions. When the product manager showed us the prototype, he included some auxiliary functions beyond the core functions, such as information, counting the probability of users’ bullish and bearish moves, risk alerts, and modifying users’ avatar nicknames. As a result, all these functions that did not affect direct trading were cut. In addition, some interface processes have also been simplified.

Subtracting requirements is thinking about how to meet goals quickly and easily. Think of core requirements as a chain. To determine whether a function point is necessary, consider whether the chain will break if the function point is removed.

Design of the prototype

One thing to keep in mind when designing a prototype: I’m designing a prototype, not a UI. The process of prototype design is also a process of sorting out product ideas and an iterative process, gradually refining the process from the whole to the part. On the whole, it mainly refers to the information architecture of the product, such as the functional structure and navigation structure; on the part, it mainly refers to the page layout and interaction, such as content arrangement, page switching, button clicking, etc.

When I prototype, I like to do subtraction as much as I did requirements analysis before prototyping. Try to reduce page level, page number, page interaction, try to make information flat. For example, user login and registration, I do it in one page.

Take my own project as an example and tell me briefly how I prototype.

First, classify the functional requirements. Based on the functional requirements identified in my previous article, I have organized the following information structure:

  • Log in to register
    • Registration of mobile phone number
    • Mobile phone Login
    • Making the login
  • Publish content
    • Post questions
    • Issued share
  • Display content
    • Apes of concern
    • The ape of the stack
      • The mobile terminal
      • The front end
      • The back-end
  • The user center
    • Personal information
    • What I post
    • What I care about
    • The people I care about
    • People who care about me
    • My news

Next, determine which pages are available. One page is required for login and registration. The home page is mainly for displaying content, and two entrances for publishing content and user center should be added. The apes of concern and several apes of the same stack can be set to several tabs. Each subitem in the user center can be a page. Post questions and post shares can also be a page each.

Then, the content is laid out. When typesetting, you don’t need to think too much, just put the same level of content together in the simplest way. Remember, don’t think about layout, that’s for UI design. Finally, I designed the home page as follows:

Finally, is the design of each sub-page, also use the same design process and home page. Too many pages, I don’t post them anymore.

Throughout the prototyping process, some details need to be constantly adjusted and supplemented. If your prototype needs to be compiled into a requirements document for developers to look at, it is recommended that you also think about data boundaries and interaction details while designing the page, and note them next to the page so that it will be easier to organize the requirements document later. Some people might think about these things when they’re putting together the requirements document, but it’s easy to miss them, or even forget them. Therefore, when designing, think first, and then check whether there is any omission when sorting out the documents. In this way, the design of the product will be rigorous.

Here is my login page with the accompanying notes:

Write in the last

The fastest prototyping tool is actually pen and paper. In fact, there are no special skills in prototyping, the key is to understand user experience, user-centered to carry out design work. It is recommended that everyone read User Experience Elements.

Scan the following QR code to follow the subscription number.