fighting for truth, justice, and a kick-butt lotus notes experience.

Optimized Notes App Design for the iPhone

 16 Dezember 2019 11:33:51
Since version 1.0.5 of HCL Nomad (formerly IBM Domino Mobile Apps) existing classic Notes applications can now be used on the iPhone. The previous version only supported the iPad.

Due to the form factor of the iPad, Notes applications were generally usable without major design adjustments and looked and operated exactly the same as on a Windows or Mac Notes Basic clients.

For the iPhone, due to the smaller display, classic Notes applications can also be used without design adjustments, but in practice these will be difficult to use.  Therefore, it makes sense to take a look at your existing applications to see to what extent they can be used out-of-the-box or which can be adapted with little effort especially for use on the iPad and especially the iPhone.

The first demos, ideas or approaches for how Notes apps for the iPhone can be adapted especially for the iPhone using HCL Nomad are now appearing on the various channels.

For example:

Image:Optimized Notes App Design for the iPhone

Image:Optimized Notes App Design for the iPhone

I have looked at these examples for a long time and have thought and experimented for a longer time, how to build an optimized iPhone navigation and interface for the iPhone with the existing Domino Designer tools.

Here I followed the design recommendations of Apple. Apple has excellent material for this:

Apple WWDC 2014: Design Intuitive User Interfaces

2014 I had the pleasure of following this session live in San Francisco at WWDC  and of talking to the Apple Design Engineers afterwards. Before you start customizing your applications, just watch the video above and think about it.

So what's important?

1. The navigation must be simple.

2. In particular, the navigation must be easy to reach. Ideally for an iPhone app with one hand using your  thumb.

3. Less is more. So focus on the essential, the important. Which function is needed mobile with the iPhone? Do I really need all 30 views or are two or three views enough? The 80 : 20 paradigm helps here.

Now how can this look like?

I took the old Notebook / Journal template and adapted it for the iPhone.

Image:Optimized Notes App Design for the iPhone

The time it takes are only 1 to 2 hours and as a result you get a basic framework, which is also transferable to other applications.

I decided to put the navigation in the footer and insert the three most used views there.
This way the app on the iPhone can be operated easily and uncomplicated with one hand.

Image:Optimized Notes App Design for the iPhone Image:Optimized Notes App Design for the iPhone

The ... button offers more views. With the + button a new journal entry can be created.
Actions for a view entry (delete, copy, ...) can be selected via a swipe gesture to the left.

I will explain how I did this in a few separate blog posts over the next few weeks. Here is just the idea and how it can look like.
It is not magic - only a custom frame, a page, page actions and four images ressources. So stay tuned and I would be pleased about feedback in any case.

By the way DNUG will host a webcast regarding this topic on January 21st:


1Theo Heselmans  19.12.2019 12:31:44  Optimized Notes App Design for the iPhone

Very nicely done!

And like you said: not much work to get an existing application look nice in Nomad.

Of course the screen real estate of a smartphone is very tiny.

One thing I would change additionally: the standard twisties are too small and not very ‘nice’. I played with them a bit and came up with a different option (see the search view in my Wine Tasting app).

And do sent in your abstract for Engage. Love to see it being presented I. The Netherlands.

  • Hinweis zum Datenschutz und Datennutzung:
    Bitte lesen Sie unseren Hinweis zum Datenschutz bevor Sie hier einen Kommentar erstellen.
    Zur Erstellung eines Kommentar werden folgende Daten benötigt:
    - Name
    - Mailadresse
    Der Name kann auch ein Nickname/Pseudonym sein und wird hier auf diesem Blog zu Ihrem Kommentar angezeigt. Die Email-Adresse dient im Fall einer inhaltlichen Unklarheit Ihres Kommentars für persönliche Rückfragen durch mich, Detlev Pöttgen.
    Sowohl Ihr Name als auch Ihre Mailadresse werden nicht für andere Zwecke (Stichwort: Werbung) verwendet und auch nicht an Dritte übermittelt.
    Ihr Kommentar inkl. Ihrer übermittelten Kontaktdaten kann jederzeit auf Ihren Wunsch hin wieder gelöscht werden. Senden Sie in diesem Fall bitte eine Mail an blog(a)poettgen(punkt)eu

  • Note on data protection and data usage:
    Please read our Notes on Data Protection before posting a comment here.
    The following data is required to create a comment:
    - Name
    - Mail address
    The name can also be a nickname/pseudonym and will be displayed here on this blog with your comment. The email address will be used for personal questions by me, Detlev Pöttgen, in the event that the content of your comment is unclear.
    Neither your name nor your e-mail address will be used for any other purposes (like advertising) and will not be passed on to third parties.
    Your comment including your transmitted contact data can be deleted at any time on your request. In this case please send an email to blog(a)poettgen(dot)eu