×
Namespaces

Variants
Actions
(Redirected from Designing Notekeeper)

Notekeeper Qt Quick Evernote client - app showcase

From Nokia Developer Wiki
Jump to: navigation, search

Notekeeper is an Evernote client written using Symbian Qt Quick Components. This article explains the main eleemnts of the design.

Contents

What is Notekeeper

Notekeeper lets you access the notes in your Evernote account on your Symbian phone.

Notekeeper logo.png

Notes can be browsed by last-updated-ness, or by notebooks or by tags. Notes can be edited, and the notebook or tags they're associated with can be changed by the user. Notes can also be marked as favourites, and they can be trashed too. Searching notes is supported as well.

The design thought process

The start screen (assuming the user has logged in earlier) should give the option of browsing notes, creating a note and searching for notes. These are the things that the user is most likely to do immediately on startup. Once the user is viewing or editing a note, the main things that the user might want to do are: editing the note, seeing or changing the notebook / tag of the note, setting it as a favourite, or deleting the note.

The app predominantly uses two colors: white (the color of a notebook page) and green (to suggest that it talks to Evernote).

Qt Quick Components vs Custom Components

Qt Quick Components are used in most of the app, for it's the easiest way to give a familiar experience to the user, consistent with rest of Belle.

Start screen: The start screen shows a tabbed view with 3 tabs: All notes, Notebooks and Tags. If the user taps a notebook in the Notebook tab, we drill down to show the list of notes in that notebook. Tags are handled similarly. This offers the navigational capability for browsing the notes. Tapping on a note shows the note.

The toolbar for the start screen has the functional actions: Creating a note, Search and App Settings. The Settings screen uses many UI elements from the Components. Also, all dialogs (for important errors) and info banners (for other alerts) are implemented using Components.

Notekeeper Scr000008.jpg

Backstepping: The back button is used throughout the app to backstep to the previously-seen view. However, only for the start screen, I chose to change the logo of the back button to an "X" to indicate that this the first screen (and tapping 'back' will close the app). Also, I noticed that sometimes, as a user, when I want to go back to the start screen, I backstep too many times and end up exiting the app. So I disable the back button for a little while to prevent that from happening. I notice that the Nokia Store app also behaves in a similar fashion.

Text editing: An important part of Notekeeper that does not use Qt Quick Components is text editing. I wanted the note editing screen to look like the page of a notebook, and it was not possible to change the look of the TextArea component to do that. Also, I thought the text selection using double and triple taps was a little non-intuitive for people who don't know that they're supposed to double tap.

This was a significant problem area and I spent a lot of time designing a custom look for the text editor and also to make it's behaviour consistent with the standard TextArea component (like longpress for showing the magnifier, double tap to select word, etc.).

The end result is that Notekeeper uses a custom-designed text editor, that implements its own text selection and context menu.

Notekeeper Scr000011.jpg

This also enabled me to blend the date and the favourites button (the blue star) on top with the text of the note to give a continuous flow to the page.

Title bar: The guidelines don't talk about titlebars, but I found them very useful to give context to the page the user is seeing. When the user taps a Tag, he sees a list of notes. The context is provided by the titlebar, which shows a tag logo and the tag's name. It also tells the user that if he backsteps, he will go to the list of tags. So, each page shows a glossy green titlebar telling the user where he stands in the app.

The end result

The app is available on Nokia Store here.

Article Metadata
Code Example
Installation file: Notekeeper (Nokia Store)
Compatibility
Platform(s):
Symbian
Article
Created: rheupeiti (26 Mar 2012)
Last edited: hamishwillee (20 Apr 2012)

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

This page was last modified on 20 April 2012, at 06:42.
64 page views in the last 30 days.