How many Modal's is too many? Do user's like windows within windows?

Starting a new web application project from scratch is a great way to re-assess the standard UI elements and structure that leads to how your users interact with the end product. I personally have always wondered how each UI element has been essentially typecast into different roles within the user experience.

Is the modal under utilised in app development?

For example the modal UI element is supposed to only be used for simple confirmation, forms or alerts as they usually operate within a small window and are used to obscure the background information from the user. Why is it that the modal is limited to such use? Is it possible to have an easy to use app that has modals within modals?

Modal's within modal's or is that crazy talk?

It is definitely programmatically possible to have an infinite number of modals nested within each other, the same way you can have an infinite number of pages/views in your app.

So why is having different pages/views considered better?

When you have a new page your user transitions away from the content they previously were connected with and now are focused on the next content. The concept is based around that the user is moving towards an end goal, so showing a modal for each step along the way would clutter the screen but also make it seemingly complicated to back out to the previous step.

Your user's don't want to feel like this is their workspace.

Sometimes, however you might not want to send your user to a new page as they will loose focus on what they are doing. They might be creating an object that has other objects attached to it, for example an order with line items. You might elect to pop up a modal when the user is adding an item to an order as they are still in context with the order. If you were to send them to a new page purely for adding line items they may feel disconnected with the initial order object, by using a modal you are 'nesting' the window within the order object and allowing the user to continue updating the order object.

The other option for this case is to still maintain the connection would be to dynamically update the UI when a user presses 'Add' or 'Edit' line item, so no modal is used and the user still is connected to the object. They are just simply loading in the related content as they traverse the page of the app. This is the best option but sometimes if designing for mobile devices there is not enough screen estate to do so without it looking crowded.

It is a case by case basis where modal's are relevant, (just like with every other design choice) the user is the ultimate deciding factor as they may be more comfortable with having multiple windows on screen at once knowing that with a few closes they are able to get back exactly where they started without changing pages/views.

HTML5 Web App iPad Locking and Response

Having recently built a HTML 5 web app for a client to use on an iPad I hit a couple of issues to do with the slight differences in developing for a mobile device vs developing for the browser. I am not talking about native apps, as I am sure they have ways to deal with these issues. So lets look at the first issue.

Username and Password to Login

First issue is present within each approach but is more obviously irritating on a mobile device. Having to type your username and password again is a pain, but its more of a pain when you have to type it on an onscreen keyboard (and if it is a strong password it could mean switching to numbers and symbols on the keyboard).

It is also different from developing in a browser as usually a browser user leaves the browser open and has it in a separate tab or separate window which maintains the session and means they usually don't have to log back in. On a mobile device it is usually one app at a time so if you leave the app (pressing the home button) then the session is broken and it will ask you to log in again on your return.

Solution

One way I chose to solve this is by using a cookie to store a session variable after the first successful login. 

The web app I have developed uses the mydigitalstructure platform and it does the verification of access to the user. After logging in the user agent is returned an SID (Session ID) which can be appended to any calls to the API in order to retrieve the information. This SID would form the basis of any ajax calls that went into mydigitalstructure. 

So to prevent the user from having to log in again I thought to store this as a cookie on the device using a simple jQuery cookie plugin. This way when the user gets to the login screen I check for the presence of the SID cookie, if it exists and is valid (not expired) then run as normal no need for login, else force the user to log back in. Now the user can leave go into another app and come back and still be logged in. Obviously through the code I can set the expiry of the SID cookie and also set up extra levels of auth if required by the app.

The Lock Button

The other issue I found was the lock button. If the user had the app open full screen, left it for a few hours then came back upon unlocking the iPad the app would not realize it has been 'woken' up until the user triggers an event. This could mean there are new items that have arrived in their job queue, or something had been updated from the screen that they locked on. A client may unlock the iPad looking for new jobs/deliveries see nothing and then lock the app again. 

Solution

Unfortunately there is no way to check whether the iPad has been 'woken' directly from a web app, ie no signal or event is triggered by the Apple product to indicate to a developer something has happened. 

I found a solution here which sets up a timer or a heartbeat which will constantly loop as your app runs, the moment their is a discrepancy between the interval time and the expected time it will trigger a custom function. This seems to work well as now I can use this check for the validity of the SID and check the user is still logged in. I can also update where they left off as other users may have updated records they were working on.

A Picture Paints a Thousand URLs

Starting to look into the various drawing libraries there are out there for HTML5 and I am looking for some particular features. These are:

• Ability to draw freehand shapes within the bounds of a canvas element.
• Drag and Drop elements on the canvas and move them around.
• Dynamically generate elements onto the canvas for user.

So the closest I have come so far is sketch.js for the handling of freehand shapes and kinetic.js for the shape manipulation and the drag and drop. Both seem to work very well on their own, but when I apply to the same canvas sketch.js takes control and removes all the work that kinectic.js has done and claims the canvas for itself.

I have to figure out if there is a way for me to use sketch.js as another 'layer' within kinetic.js which will allow the user to annotate and drag and drop elements within the same canvas. 

Or alternatively simply use kinetic.js for everything. I will proceed with this line of thinking first as this would be the best outcome as sketch.js is pretty simple to begin with and should be already present within kinetic.js.

More reading and looking at the Crazy Snake Tutorial has lead me to believe it can be done, but I have stepped back and thought about what it is I am trying to do. I want the user to be able to drag fixed elements and also annotate on the same canvas? That sounds pretty screwy, in fact I don't think it has been done on a Windows/Mac app without the use of layering. As you wont want to place elements and draw at the same time, it can become messy.

I will change the process to a two step, first draw your diagram freehand using sketch.js, then drag your elements around till your hearts content, ill obviously have to provide a way to switch between the tools but I think that will be the fastest and best outcome for the client.

I am finishing off the job now, looks like sketch.js and kinetic.js did work out well, the sketch was created with sketch.js, then the dataURL string was saved into a variable and placed into a layer within kinetic.js which had the elements pre-loaded on top. This way user can't mess up what they did in step one but they have full flexibility to drag elements around the stage. After the user saves, the dataURL replaces the first dataURL, then I used mydigitalstructure to save the image as a PDF. Emailed it across to the user and then done.

One major snag I hit along the way in my app was that when I positioned a canvas outside of the iPad's viewport and had to swipe my finger down to see it, the shapes within were no longer draggable. This was not an issue with any desktop browsers, I guess it had something to do with the touch implications. Seeing as I didn't want the canvas to span multiple viewports I just hacked around it by positioning the viewport before placing the canvas and it seemed to work.

I am sure it was probably just a positioning issue with some of my HTML, as this example works on ipad fine and the canvas is first rendered off-screen. No biggie, just annoying.

All in all very interesting development project and experience that can be re-used in the future.

Modals, Edits and oOjects

Have been looking into standard objects (contacts mainly) and editing lately and have been wondering when it is best to use Modals, or Windows vs actually pushing content into a new viewport in page. Most of these approaches tie into the development widgets at Kendo UI for Web and are quite different in their approach.

Take this instance of editing a contact, a user would obviously want to search for the contact first most interfaces handle this the same way, but after they select the contact they wish to view or edit the attributes of said contact. This is where the similarities end and different interface designs take place.

Kendo UI Inline Edit

Some allow you to edit directly from where you searched inline. 

Inline Edit is great for data sets where the user only really needs access to a few fields to edit the table directly and this increases speed of users edit. However, this also means the user hasn't really established a direct view connection with the object (row) in question and may feel like they are simply editing an excel table. Also if you start having more then 5-6 fields the user can get lost quite quickly editing from left to right to complete the row. I think users would prefer a long page with a lot of elements then a wide page where the fields are listed left to right, harder to read. All in all good for maybe product price adjustment lists which don't have many fields and allow you to edit but for a contact which has lots of data not really user friendly.

Kendo UI Popup Edit

Others may use a Popup Edit Modal.

Popup Edit allows the user to actually enter a view for the object in question where they can edit the data. This edit view can be presented differently from the standard search view and will make the user feel as if they have 'opened up' the object in question. This means that your search view can be really simple and can avoid having lots of text as the editing is not done inline. 

This however, can fall apart, if you have a variety of object links in context to the current object. For example "I have a contact which has actions linked to it, in the edit modal, I would like the user to be able to view the actions in the same modal" having this in a window could create confusion with the user as they could open the modal at the contact search screen, but lose context as they navigate across to the action object. If you are going to use a modal for editing an object it cannot be too complicated, should be a single screen should avoid cross object issues. If you want to create a view where a user can view a contact and all the actions they have linked then it should probably be part of your contact view, not the edit screen.

Custom Edit Screen

A Custom Edit screen can be created and is probably the approach of choice in most situations and is the most popular. These usually mix in read only structure with editable fields, this allows the user to have a nice view of summary information about the object and also a separate area for editing of details, all of this is contained in the same view of the object, just containing specific areas for edit.

The approach also allows for cross object linking so a user could navigate from a contact to a linked action and change object views without being confused as to where they are in relation to the objects they are working on.

Overall

These approaches are definitely not the only ones available as a developer but I think it is worth having a look at each, it all relates back to your audience and what the users are looking for in the app. Custom Edit is obviously the most used, but in some cases an inline or window might be best for the user.

Kendo UI, mydigitalstructure, PhoneGap native on Android

Set out to create a simple HTML5 web app with Kendo UI, then use PhoneGap to port it across to Android to see how difficult the process would be. The answer, not difficult at all which makes sense as it is noted on Kendo's website that PhoneGap and Kendo play nice together, I didn't think it would be this easy though.

First thing I set out to do was to use Kendo UI tabstrip to create a simple HTML5 page where I would use mydigitalstructure to allow a user to login and have the tabs of Actions, Contacts at the bottom of the page and when they switched between each they would be shown the actions or contacts based on a remote source represented in the Kendo UI datasource.

After creating the HTML5 app using Kendo UI mobile I had two html pages, the home page (which contained the login Modal View and a page called apphome which contained the tabstrip items. Both pages contained references to the relevant kendo files and to the master01.js file (this is my javascript that contains the details what GET and POST commands to send to mydigitalstructure).

Beginning to port, I once again followed the information at PhoneGap for Android and fired up Eclipse and built my page and ended up with an index.html swapped in the cordova js file and then started to copy and paste in my header scripts from the HTML5 app, namely kendo.mobile.all.min.css (mobile css for Kendo), 1466site.css (an additional css for my app),  jquery.min.js (a helper js library), kendo.all.min.js (all js for Kendo) and my master01.js.

All went well I created copied across my HTML from the home page and created a new file called apphome.html, since I changed the name of my apphome page I had to change references in the master to read app.navigate("apphome.html"); instead of app.navigate("apphome"); but easy fixes all round.

Then i tested and sent the result to my Android HTC Desire, and the login screen was displayed with the details and basically looked exactly like the HTML5 experience minus the chrome, great stuff, now all going well but after logging in I was encountered with an issue

08-05 11:01:10.932: E/Web Console(19937): Uncaught TypeError: Cannot call method 'replace' of null at file:///android_asset/www/kendo.all.min.js:8

What the hell is this? This appeared in the LogCat logger of items, and since this was the first time I had hit an issue with Eclipse I was truly scratching my head wondering what is going on. My only option was to start commenting out HTML elements to see what is causing the issue. After basically taking the app back to grass roots and slowly building up I suspected the issue was caused whenever I was trying to load content in from the datasource??

Found it finally I had made the simple mistake of not copying across the templates script snippets from the HTML5 app, so Kendo UI was trying to create the listview but had no template as a reference, I added and tried again and everything was fine my contacts and actions would load when each tabstrip option was pressed, very nice, now I have a native app on Android which uses Kendo UI, mydigitalstructure and PhoneGap. 

Now since I am not using any native phone features (location, filesystem, camera etc) that will be my next step to incorporate these features into the app too, also I want to see how I can maintain a session so the user has no need to constantly log in.

Another look at phoneGap

Finally got around to completing the Getting started guide with Android  from phoneGap, so have a bit of feedback on the process.

As a concept this is basically how it shapes up,

• Eclipse is the favoured development environment for phoneGap to integrate with, and maybe android too, although I am sure there are others around.
• Android SDK basically the bits and pieces that make it possible to develop for android, I am assuming this includes the emulator and drivers etc.
• ADT Plugin this I think is the plugin which links Eclipse software to the Android SDK and needs a little config to get it working.
• Finally we get to Cordova which is the java and javascript which in my mind is 'phoneGap'

Android SDK Manager, you will see this screen a lot asking to update items, I suggest you do!

Ok so the concept there, how easy is it to get going, Eclipse is easy, a compressed file which you can extract to anywhere in your computer, same with Cordova. Android SDK is a simple install, most difficult part is the ADT Plugin, but the instructions are easy to follow.

Eclipse after install and attempt at multiple HelloWorlds

I had no problem at all running through the HelloWorld program and deploying to the simulator/emulator for android. The index.html rendered and all was good in the world definitely felt like a native app.
The virtual android device I set up was a Samsung Galaxy S2 4.0.3 but my computer was running it fairly slowly, so I would suggest you either have a decent computer with a good video card or it may struggle. I didn't want to test with a simulator anyway as I have a HTC Desire phone to play with.

Virtual Device Manager for Android, create all the phones/devices you want.

Problem was that all the documentation was saying that it should be displayed as an option after you switch on USB Debugging on the phone. I checked in device manager (im running windows 7) and found an odd device called 'ADB' which had an ominous exclamation mark next to it, indicating there was a problem with the driver. After a bit of searching I found a great article with a link to the HTC driver after I updated and installed Eclipse could see my device, yay!

I ran the helloworld app on the device it worked. A simple native app deployed and tested without knowing one bit of android code. Next is to see how far I can push the loading of the app using kendo UI really interested to see how it performs.

First blog post should be an interesting development, diving into PhoneGap to see how easy it is to take an existing HTML5, CSS, JS web application and making it native.

Just trying it out at this stage, also want to have a look into how this will work with Kendo UI 

Hopefully will be a smooth transition across as PhoneGap is touting that it is somewhat simple to make this transition. Fingers crossed.


First step is to head over to the getting started guide for Android as I am planning to test first on Android, then will move to iOS. Will post soon with any issues that occur during installation and first app.