Create help section - access to answers in the app

Inserting a help-section in your app can play a crucial role in enhancing the user experience. Often, users have difficulties navigating an application or they need answers to specific questions. In this guide, you will learn how to create an effective and visually appealing help section create that not only answers FAQs but also integrates feedback features.

Key findings

A well-designed help section can increase user satisfaction and reduce support effort. It is important that the help is clearly structured and easily accessible. You will receive in this guide:

• Step-by-step instructions for creating the help section.
• Tips for usability and designing the FAQ.
• Guidance on integrating a feedback button.

Step-by-step guide to creating the help section

1. Create a new controller for the help section

To integrate the help functionality into your app, start by creating a new controller. Press the A key and select the iPhone 8 as the target device. Name the controller "Help".

2. Set the background and plan the layout

The background should be kept white to ensure good readability of the content. Add a header to clearly label the section. You will also need a Collection View or Table View to display the most common questions.

3. Add the header

Start by adding the header, which should be about 150 pixels high. Remove the border and choose an appropriate green color for your design. Ensure that the header is consistent with the design of your app's other screens.

4. Add the status bar

To integrate a status bar, you can either go through the Sketch Runner or the Insert menu. Set the Status Bar to "Dark" to create a nice contrast with the white background.

5. Create the text box for the title

Add a text box that will carry the title "Help". Choose a font size of 40 pixels to make it clearly visible, and position it 16 pixels below the header.

6. Add the Table View for the questions

Create a rectangle with a height of 90 pixels that represents the size of the question container. The rectangle will stretch across the entire width. Insert several dummy questions as examples so that developers can get an idea of the layout design.

7. Design the question containers

To make the questions visually appealing, add an arrow (Arrow) that leads to the answers. Position the arrow strategically right next to the text to indicate to users that they can select the question.

8. Implement separators between the questions

Add thin gray separators between the questions to structure the layout with clear divisions. These separators should span the entire container width.

9. Create a symbol for the Collection View

Select all components you want to include in the Collection View and create a symbol named "help sell". This structure makes it easier for the developer to implement the FAQ sections in the app.

10. Add a feedback button

To ensure that users can contact you with questions or issues, add a feedback button. Place this button at the end of the help page and label it "Send Feedback".

11. Optimize the feedback text box

The text box for feedback should be clearly readable. Ensure that the font size and text style are consistent with the rest of the app. Position it so that it is easy to find and has a distance of 16 pixels from other elements.

12. Add the cancel button in the navigation bar

Add a "Cancel" button at the top of the navigation bar to give users the option to close the help screen. This button should be clearly placed and visually lead the user back to the previous screen.

Summary - Guide to Creating a Help Section in Your App

Creating a help section in your app requires careful planning and a consistent design. With this step-by-step guide, you now know how to create an engaging and functional help environment for your users.