. Design Decisions: Developing for Mobile - The Template Experience Project

#engageug
De05. Design Decisions:
Developing for Mobile - The
Template Experience Project
Gabriella Davis
Tim Davis
The Turtle Partnership
1

#engageug
Template Experience Project
• An HCL sponsored project to produce templates that show
Notes development on mobile
• The team involved includes Business Partner developers,
HCL Development, UX and Support
• https://templateexperience.com to read the latest on the
project as well as participate in surveys around design
2

#engageug
Discussions on iPhone
3

#engageug
Discussions on Tablet
4

#engageug
Discussions Design
• One database, the same data accessed regardless of client
• Avoiding duplicate design elements
• Ensuring it looks good on whatever client you are using
• Using standard Domino Designer code and techniques
• Aiming for the design elements to be merged with your
existing applications
5

#engageug
Where We Are & Next Steps
• Continuous development alongside Nomad & Domino
Designer
• Released along v12 timeline
• Technote KB0076430 being published this week
• beta version publicly available along with a whitepaper on
the design decisions and work done
6

#engageug
HCL Nomad
• Nomad is the client we are designing for, with both mobile and
tablet versions
• As much as possible we want to avoid duplicating design
elements and code for different clients so you can develop
once and access anywhere
• Nomad gives us advantages over web development for mobile
• It’s another client platform that can be developed alongside
the Notes client
• It has all the main benefits of a Notes client application,
including offline replication to a mobile device and security
• It allows us to develop for both phone and tablet, iOS and
eventually Android with the same code
7

#engageug
Platform Detection
• Using @Platform to determine which client is being used
• @Platform([Specific])
• PrimaryOSName, for example, iOS
• PrimaryOSVersionNumber, for example, 12.4
• iOS Model Type, either iPad or iPhone
• Apple Hardware Identifier, for example, iPad8.4
• iOS, 13.3.1, iPhone, iPhone10.4
• Upcoming extensions to @Platform will include parameters for
screen dimensions allowing us to size a layout for iPhones and
tablets from small to large by detecting maximum screen height and
width
8

#engageug
Demo & Digging Into Design
9

#engageug
Designing Platform Specific Framesets
• Let’s revisit our iPhone vs tablet design
• We want to avoid multiple design elements doing the same
thing but for different screen sizes
• We opted to have a launch frameset containing one frame
with a computed value of
• @If(@Platform([Specific])="iPhone";"phone";
@Platform([Specific])="iPad";"tablet";"other")
10

#engageug
The iPhone Design
1. All Topics view
2. Favourites view
3. Tracking view
4. Filter Search
5. Search toggle
6. FAB (floating action button)
12

#engageug
Document Design
1.Switch to edit mode
2.Delete
3.Icon showing this is "helpful".
4.Icon showing this is one of the
user's favorites.
5.Icon showing this document is
being tracked by the user.
6.When tracking is enabled the
details of when it will stop is shown
on screen.
7.Comments and responses. The
count shows number of unread /
total number of comment
responses
13

#engageug
Scrolling Comments
• We are trying to minimise the number of screens / clicks that
people have navigate
• Comments in response to a document are displayed using
passthru HTML
• We are then able to also display total number in a thread
• Clicking on a comment header opens it on screen
• Clicking “All Comments” opens to that document in a view
14

#engageug
Tags
• We are avoiding doing too much on a single screen or
working with popups
• our approach is to onto a separate screen
16

#engageug
Using Icons For Status
• To optimise the limited on-screen space on mobile we
wanted to make maximum use of images to provide
information
• In views we used icons to not only change data but to give
context to what you’re looking at
• Outline - inactive / Filled in - active
• We use the same behaviour on a document to show the
helpful/favorite/tracking status
• Helpful icon in a view column
• view column settings / show icon
17

#engageug
The F(loating) A(ction) B(ar)
• We wanted to move common
actions from the action bar in a
view which has limited width
• The Nomad team introduced
the FAB so that action bar icons
could be mapped to an iOS
sheet menu instead
18

#engageug
Right Mouse Click
• On Nomad a right mouse
click action instead
responds to a long press
• We use it for document
specific actions such as
adding a response, deleting
or marking a document as
“helpful”
19

#engageug
Marking Documents As Helpful
• Used instead of “Like”
• The difference between something being helpful vs liked is that
we remove any weighting from a count
• A document on an obscure topic that is helpful to one person
is just as valuable as a document that is helpful to 10 people
• A document is either helpful or it’s not
• How do we mark and show “helpful” ?
• We use a combination of view column icons and system
profiles
• Since a document is marked helpful regardless of who marked
it we can use a system profile to store that information
20

#engageug
Marking a Document Helpful
• A long press brings up the menu where you can select “Mark as
Helpful” in a view
• Alternatively you can click on the helpful icon on a document you are
looking at even if you don’t have edit access to that document
• A profile form called “HelpfulProfile” is used to create a database
profile
• there is a field $IsHelpful which contains a formula which
computes to the image name to display
• the image is an image resource in the database
• the form doesn’t exist as a design element as it’s a background
profile
• refer to the documentation for details of the design elements &
code 21

#engageug
Favorites
• Marking a document as a Favorite is a personal setting
• The “Favorites” private on first use folder populates with all
documents you have marked each time it opens and clears
each time it is exited
• You can Favorite (and Unfavorite) by selecting the
favourites icon in the document
22

#engageug
Setting A Favorite
• Our challenge is that the user may not have edit access to
the document if they didn’t create it
• So we can’t write directly to the document the fact that
“Gab” has favorited it
• We have a script that populates a background document
(one per user) with the unids of any favorited documents
• The folder is populated and the icon is displayed based on a
lookup of the current document’s unid matching an entry in
the background document.
23

#engageug
Tracking & How It Works
24

#engageug
The Filter Search
• We wanted to minimise the
amount of typing someone
would have to do when
searching for information
• We built a page that is
populated when it loads
using LotusScript, and
contains the most
commonly searched for
criteria
• On tablet we have enough
room to have the filter page
always displayed 25

#engageug
The Tablet Design
26
Document in
Preview mode with
restricted options
the filter search
displays in a left
hand frame

#engageug
Pilot
• The template is ready for its initial pilot although more work
will continue throughout the v12 development timeline
• There is an accompanying technical whitepaper that details
the design and explains the code
• You can download the template and whitepaper from HCL’s
support site by searching for technote KB0076430
(appearing this week) at https://support.hcltechsw.com/csm
• Thanks to: Theo Heselmans, Carl Tyler, Tim Davis, Maxx
Sutton, ME Miller, Dave Cohen, Fadil Channer
27

. Design Decisions: Developing for Mobile - The Template Experience Project

Recommended

More Related Content

What's hot (20)

Similar to . Design Decisions: Developing for Mobile - The Template Experience Project (20)

More from Gabriella Davis (20)

Recently uploaded (20)

. Design Decisions: Developing for Mobile - The Template Experience Project