Form is way of communication

The content of this section is from Jessica Enders’ book, Design UX: Forms: Create Forms That Don’t Drive Your User Crazy (Aspects of UX)

Four-state Model for Question Answering

1. Comprehension: understanding words and meaning
2. Retrieval: searching memory, feelings, thoughts, and resources
3. Judgement: checking answer suitability and making adjustments
4. Answering: physically providing the answer.

Comprehension

Use plain language:

• shorter, simpler words
• shorter, simpler sentences, each of which expresses just one idea
• the active voice
• words that are familiar to the person filling out the form.

Avoid ambiguity

– “Where do you work?”

– “I work for Google.” or “I work in Fargo.” or “I work at home.”

Retrieval

Ask the questions that users can easily answer.

Judgement

Let the user know why you ask the questions. and provide instructions.

Create a welcome screen

This could be followed by an introduction page. If you put everything in one page. The user probably would not read the paragraphs.

Then start to tell the story

Yours or Mine?

What pronoun to use

Are your users telling their stories?

or

Are they having conversations with you?

Types of Forms

Stepper Form

Natural Language Form

Conversational Form

On this page, I listed some essential documents of the user interface design and their purpose. Most examples I used are from my previous project. You can find the full project at /cocook. During the design process, those documents will not only help you communicate with your team but also give you inspiration and a better understanding of your design. 

Sketches

The sketch is the language of a designer. You should use it frequently to communicate with your design team and developers. In Figure 1, our team use quick sketches to do brainstorming and discuss the design concepts. In Figure 2, you can see a lot of details in the wireframes. I used this to deliver my design ideas and collect feedback from visual designers and developers.

Digital Wireframe

Digital wireframes are high-fidelity mock-ups with more details. In the example below, I defined the page layout, element size and put actual text into then. With this, you can build prototype to do the usability test and show your developers how it looks so that they can start to create the framework of the system.

Visual Design

This is an important document. If you want to accurately implement your design (e.g., color, font, icons, etc. ), you must send this to your developer.

Assets

When you finish your design, prepare all the icons or images that will be used in the actual website or app. You need to save them in PNG, SVG (both for icons), gif (aminated icons), or jpg (for photos) formats and send them to your developers. They could not create such assets from the previous documents.

Storyboard

During the concept development process, you can use the storyboard to simulate the scenarios of the service. You may show this to your manager, marketing team, and other designers. If you are creating a video, the storyboard is the sketch to develop and discuss your ideas.

Workflow Diagrams

Workflow diagrams are used to demonstrate the process of an activity. They are helpful when you want to show how the thing works or how the user uses your product. You can use this diagram to document or communicate your design concepts with your design team in the early stage or demonstrate the website design details.

To prevent the spread of COVID-19, all the researchers and participants are required to wear face coverings in the building. Before you enter the office, please download the screening form, print, and complete it, then bring it to me.

Important: If you were confirmed with COVID-19, or had contact* with a person with a confirmed case of COVID-19, or had any of following symptoms, please reschedule this study 14 days later:

• Have you had a fever within the last 14 days?
• Have you had a forceful dry cough or productive cough within the last 14 days?
• Have you had difficulty breathing or shortness of breath within the last 14 days?
• Have you had a sore throat within the last 14 days?

*Contact is defined as less than 6 feet separation for more than 15 minutes without adequate personal protective equipment.