SWAMI v1.1 - UI update
From an application architectural perspective, I believe I am close to the goal I set out to achieve with the SWAMI application, as documented on the v2.0 to do list, there are still many things to add.
I'm the first one to admit, I focused purely on getting the plumbing right and did a skeleton job on the User Interface. There used to be a time when you could get away with having a poor UI, so long as the functionality was there for the user. Nowadays though, people expect more. They want a swish nice looking UI. With that in mind, I spent about a day changing the UI to use the Ionic Framework.
It was actually easier than I thought and whilst it is quite simplistic, it is clean, crisp and does actually make the app more user friendly. I tested the app on a Motorolo Moto G Android phone and a Nexus 7 and they both look good and work well, perfectly usable.
Link to v1.1 project code (yes, I'll look to add it to my BitBucket/Git account at some point)
By default when the app starts it now displays the 'To Dos' tab, it made logical sense to do that rather than have a menu screen. This would match the user scenario usage too. I suppose I could put some logic that did a check of the time and if before 9am then redirect to the 'Start of Day' page and if after 5pm then redirect to the 'End Of Day' page. That would be nice for the user (or annoy them...a lot!).
Anyway, as you can see there are no 'To Do's, so we press the tab icon for 'Start of Day', press the new nice big button to Sync...it does exactly the same as before, I did not change any of the existing AngularJS controller code at all. All I have changed is the User Interface.
After syncing the data, you now see that we have 2 'To Dos', the notification red '2' icon lets you know this, just incase you have trouble counting - seriously though, it is a nice touch to have a number indicator and I like "free" code, ie. get that nice functionality without having to code. If you tap/select the restaurant it takes you to a new Inspection data entry screen - just like before.
As you can see the native Android Date Time picker is displayed to the user - on the Nexus 7 you get the date scrollers and the calendar view, on the smaller screen Motorola Moto G you just get the date scroller due to screen size - exact same functionality and no coding needed. nice.
As you can see the native device option selects are displayed rather than desktop style drop down boxes. Which is really useful for this scenario - I chose to have the question displayed to the user, which when shown on the screen actually goes off the right-hand side of the screen - although, when you click on the question with your finger it pops up the selection and shows the question in full to the end user. It's a nice effect.
Once the inspection has been completed pressing the nice bit green button does exactly the same as before, it adds a new entry into the completedInspection JSONStore and removes it from the To Dos.
If you click on the 'Done' tab icon at the bottom of the screen, you'll be shown the list of completed Inspections as shown above, the notification icon (red '1') performs a count of the rows displayed and does dynamically change, again, no code needed. Upon selecting a row, you get to see the read-only version of the Inspection (the same as before, except just now using different UI classes)
The eagle-eyed may have notice, I ditched the TABS for each of the Inspection sections and instead went for the 'keep scrolling down' UI approach. Mainly because, well, it just looked nicer and worked better.
Using the Ionic framework also allowed me to have a play with the tabs (row of blue icons at the bottom of the app) and the side-menu. When you click on the '...'/More tab the right-hand side menu scrolls into view and allows for some extra links to be displayed to the user. I did tie-in Google Maps, but only as an experiment, it does open Google Maps but it needs to be enhanced to open in a specific <div> as there is no way back from Google Maps if you do go there! Also, I added an enhancement to the About screen....
I'm the first one to admit, I focused purely on getting the plumbing right and did a skeleton job on the User Interface. There used to be a time when you could get away with having a poor UI, so long as the functionality was there for the user. Nowadays though, people expect more. They want a swish nice looking UI. With that in mind, I spent about a day changing the UI to use the Ionic Framework.
It was actually easier than I thought and whilst it is quite simplistic, it is clean, crisp and does actually make the app more user friendly. I tested the app on a Motorolo Moto G Android phone and a Nexus 7 and they both look good and work well, perfectly usable.
Link to v1.1 project code (yes, I'll look to add it to my BitBucket/Git account at some point)
By default when the app starts it now displays the 'To Dos' tab, it made logical sense to do that rather than have a menu screen. This would match the user scenario usage too. I suppose I could put some logic that did a check of the time and if before 9am then redirect to the 'Start of Day' page and if after 5pm then redirect to the 'End Of Day' page. That would be nice for the user (or annoy them...a lot!).
Anyway, as you can see there are no 'To Do's, so we press the tab icon for 'Start of Day', press the new nice big button to Sync...it does exactly the same as before, I did not change any of the existing AngularJS controller code at all. All I have changed is the User Interface.
After syncing the data, you now see that we have 2 'To Dos', the notification red '2' icon lets you know this, just incase you have trouble counting - seriously though, it is a nice touch to have a number indicator and I like "free" code, ie. get that nice functionality without having to code. If you tap/select the restaurant it takes you to a new Inspection data entry screen - just like before.
As you can see the native Android Date Time picker is displayed to the user - on the Nexus 7 you get the date scrollers and the calendar view, on the smaller screen Motorola Moto G you just get the date scroller due to screen size - exact same functionality and no coding needed. nice.
As you can see the native device option selects are displayed rather than desktop style drop down boxes. Which is really useful for this scenario - I chose to have the question displayed to the user, which when shown on the screen actually goes off the right-hand side of the screen - although, when you click on the question with your finger it pops up the selection and shows the question in full to the end user. It's a nice effect.
Once the inspection has been completed pressing the nice bit green button does exactly the same as before, it adds a new entry into the completedInspection JSONStore and removes it from the To Dos.
If you click on the 'Done' tab icon at the bottom of the screen, you'll be shown the list of completed Inspections as shown above, the notification icon (red '1') performs a count of the rows displayed and does dynamically change, again, no code needed. Upon selecting a row, you get to see the read-only version of the Inspection (the same as before, except just now using different UI classes)
The eagle-eyed may have notice, I ditched the TABS for each of the Inspection sections and instead went for the 'keep scrolling down' UI approach. Mainly because, well, it just looked nicer and worked better.
Using the Ionic framework also allowed me to have a play with the tabs (row of blue icons at the bottom of the app) and the side-menu. When you click on the '...'/More tab the right-hand side menu scrolls into view and allows for some extra links to be displayed to the user. I did tie-in Google Maps, but only as an experiment, it does open Google Maps but it needs to be enhanced to open in a specific <div> as there is no way back from Google Maps if you do go there! Also, I added an enhancement to the About screen....
Just as a double-check, if you click on the 'To Dos' tab you see that there is only 1 listed now, instead of the original 2. Also, if you click on the email/phone icons they open up email and phone accordingly, which is a nice touch.
You can also see that this app is officially noted as v1.1 - I'm still not sure why it's 60Mb though, maybe I need to investigate how to trim that down for the next version!
So there we have it, I spent about 1/2 a day figuring out how Ionic works, about 1/4 of a day ripping out the old UI and about 1/4 of a day refining it to look nice on a couple of different sized devices. I must say I'm impressed with the difference that a day makes.
I now have a MacBook Pro and an iPad, so I'll start to branch out to see how this looks on an iPad soon...
Comments
Post a Comment