Following up on Why We Built Liner App, I would like to explain some design considerations and iterations we went through while building it.
Overall Design
One of the principles we had in the beginning was to make the application look like a browser, because it is where people consume articles the most. Below is a side-by-side snapshot comparison of Safari Browser and Liner App. In Safari, the forward and backward buttons are at the bottom left, followed by the share button in the middle. Putting the same three buttons left us two placeholders. We used them for collection and settings.
Now that we mimicked Safari Browser’s look and feel, we encountered a new problem. Now the app looks too similar to the browser that everything on the screen is blended with the application’s user interface, and sometimes it is hard to distinguish whether the button is coming from New York Times or from the application itself. We used different colors for the buttons, but they were not distinguishable enough. We are working on another design changes.
Highlighting Experience
Highlighting is where we put our utmost effort for perfection. At first, we had the highlight button at the bottom toolbar. It looked beautiful and seemed intuitive, but as we used the app more to make highlights, we became more aware of the travel time between the selected text and the button at the bottom. After carefully studying Amazon Kindle’s highlighting UI, we decided to move the highlight buttons to the tooltip, and here is the result of that decision.
We liked it much better. The advantage was clear when we used the app more and more. We soon found another issue though. When you first launched the app, and if you didn’t put much attention to the tutorial, you may feel lost when all you see is a web browser and a couple of buttons at the bottom. When you click on the ‘share’ button in the middle, you will be confronted with “Please make some highlights before you share” alert message. Our next version will address this.
Share Extension
As we used the app more, it became more apparent that we didn’t launch Liner app first to read and highlight something, but rather launched Twitter, Facebook, or Safari app to find great articles, and sometimes wanted to use Liner app to make highlights to save or share. This brought life to Liner Share Extension. In case you are not familiar with this expression, Share Extension is one of the most important features introduced in iOS 8. Through this, applications can talk to each other. In other words, one application can send information to another application, so the user experience is streamlined.
The initial design was to enable highlighting on the Safari browser itself, which we thought was brilliant. However, as there is a benefit of making highlights on the app, we decided to give the user an option. You can either highlight directly on the browser or other applications such as Twitter or Facebook, or save the page to Liner so you can bookmark them and make highlights later in the app.
Collection Page
From the beginning, we provided a page where you can see all of your previous highlights. We improved the design and decided to call it a Collection. The numbers in the circle means that number of highlights you made on that page. The bigger the number, the more red the circle becomes. Once the page is in the collection, you can always go back to it to make more highlights, leave notes, or share with someone else.
We are working on another iteration right now, and very excited about it. If you read through here, you should download it in the App Store. If you tried it and have a few words about our application design, feel free to reach out to me at sam@getliner.com
