Between Android Google Material Design
Google Material Design is a great framework that can help your product look native on the Android platform. My goal was to have this cohesiveness while having the QuickTapSurvey brand fit. I found GMD to have a very clear structure in place that designers could use and developers could refer to with grid specs and Android Developer links.
The more I read, the more I found missing components for certain aspects of our product. It was in these voids that I saw a challenge.
Our product is very simple on the surface, we have a set of menu options, a table list to view your surveys and the survey itself in a list to answer.
Menu
Allow me to preface this with some observations about menus on mobile.
GMD has 2 options for phone menus, the hamburger and the kebab. I am a big proponent of Luke Wroblewski’s stance on this but a bottom tab bar isn’t in GMDs specs and doesn’t go with a top tab for filtering content. It’s a lot of tabs.
Since I starting writing this, Google+ has rolled out a redesign which, yup, you guessed it, has a bottom tab bar with a top tab filter. It will be interesting to see if GMD updates their guide with specs for a bottom tab.
They’ve now added it.
There are a lot of instances of hamburgers combined with the kebab. It’s not obvious what each one does and it’s easy to get caught in the “junk drawer” trap so I had to find a more simple solution.
I had to keep in mind this is not a consumer product. It is used by SMBs collecting data on multiple devices with one or more user logins. It didn’t make sense to have a hamburger side navigation drawer defined how GMD has it, which seemed to mandate a profile picture and email. GMDs kebab by itself was the best option, it had simplicity and focus which is what we needed.
CTA
We needed a call to action for those who wish to try it out first before signing up and logged in as a guest or demo user, something of a hot button issue with me. The card format made the most sense for our CTA to create an account and get started.
Survey
When it came to the survey view, I faced another problem that was very specific to our platform. Surprisingly GMD does not have a clear structure for a numbered question and answer format which is basically a list.
There were two directions we could take on how to display question numbers. The first goes in line with GMDs spec, replacing the icon with the question number, which also allowed us to scale to numbers over 1000 in the same line, but leaves a large empty column on the left. The other follows what Google themselves have done with their app, Opinion Rewards. The key pattern I noticed is in Opinion Reward, only 1 question is shown at a time while in our product we show them in a scrollable list. Surveys are created by people from a multitude of backgrounds and industries so the term “edge case” became very narrow. Long titles and long input answers were very common.
It was important to allow people to review their answers quickly. The first option was the best choice so question numbers were easily scannable. To alleviate the empty left column, I moved the question title over an appropriate amount while still maintaining enough space so the numbers could scale to 4 digits, which is well beyond the maximum number of questions one could create and manage in a survey.
Question Types
There were a few question types that didn’t fit in any layout, component or pattern outlined in GMD.
Matrix / Likert
Typically this question type consists of 6 questions with 5 possible answers for each. Each answer has to be in the same row and has the same answer label as the next / previous. Repeating the label for every question like on paper was not a tech solution. After some brainstorming with the support and QA team we came up with a solution fit for a mobile device. The label would float to the next answer after it was tapped. The result is a visible matrix for review at the end of the series of questions.
Multiple Choice Image
The multiple choice-image question is an interesting one. Survey creators can have 2–8 images to choose from, allowing the survey taker to select 1 or more. The problem was how to display this question without causing bias. A use case commonly used with this question type is research so the layout had to be as neutral as possible.
Iconography
While GMD has a fantastic icon library resource, there were still a few that were missing for our product, even after their recent update. The goal was to make them have unity with the GMD icon family while still expressing the QuickTapSurvey brand.
We launched this and hope you like it. We’re excited to learn more about how our product is used in different industries. You can leave us feedback in the app by trying a demo survey. You can get it on the Google Play Store today.
Since starting this post, QuickTapSurvey has been awarded a Tabby award for Best Android Phone and iPhone — In-The-Field & Data Collection app. We are the first Canadian company to win this award for both platforms in the same year.
I’d like to thank the QuickTapSurvey team of developers, QA, support and marketing for their critique and feedback along the way.
