Padawan |Final Project

Yoda up[to]Date

Conceptual Design - The End

Finally the conceptual design was finalised; in a real life scenario more prototypes were necessary to comply with the methodology, but conciseness required for the project needed to be satisfied. Instead, two prototypes were serving as an example of that phase of the methodology and the conceptual design was finalised having in the background the user requirements, the 2 cognitive walkthrough evaluations, the HTAs and 2 prototypes.
The emphasis on a good communication tool learnt during the literature research, obliged to learn a new sofware: After Effects. As all Adobe® software the interface is not one of the most intuitive...but in the end I was very happy with the result. Being able to transmit an idea is very important in a software development team.

The Conceptual Design
Be patient! It streams quicker in Chrome, Safari and IE9(!!!!!)...more demanding in Firefox.

Report Redaction

During this month and the following it was time to redact the project report along with finalising and developing the conceptual design. Books that most have influenced the project were several, but two have been the spine to all this understanding:
-Simple and Usable
-Mobile Design By the time I read it it was not available on the web...;-(

And websites such as the follwoing cannot be forgotten:
uxmag
uxmatters

...just to name a few!

HTAs - user consultation

Upon the cognitive walkthrough evaluation retrived from prototype V2, the problems seem to spiral and solution was not in sight. Following the methodology, as step back was taken and, instead of relying on the hearsay, users were consulted and Hierarchical Task Analysis were drawn based on the received answers (questionnaire was made) to guide further on the problem at hand: satisfy the mainstream user.

1. HTA A
2. HTA B
3. HTA C

Prototyping with flash v2

This is the second app design prototype that has interactivity. Choosing the best tool to demonstrate this is crucial; communication is rather important and it is the key to a good team involvement. This flash application is the attemp to improve vesrion 1. In an iterative process such is any HCI methodology, having and interactive prototype allows the user or tester to come up with ideas and solutions to problems and in the process compromise the user in the development of the application. The prototype does not need to have full functionality; some functions can be assumed and, hence, reduce the time a designer would spend in the prootype phase where often more than a couple of prototypes are required, if not a lot more.

The cognitive walkthrough evaluation retrived from version 1 was the main engine for modification and improvement.

Prototyping with flash v1

This is the first app design prototype that has interactivity. Using flash to mock up interactivity and design this flash application helps visualisation. It might be possible only to open it in Chrome or Safari desktop browsers. iPhone does not support flash and the application aims really to be a tool for study/ analysis - can't really see this be done in a smartphone screen.

.apk - The App for Android

This is the android application converted using PhoneGap; clicking it will only have effect if using an android OS powered device. It will install the app immediatelly onto your android phone. It can always be removed under "Settings > Applications > Manage applications".

Interim Report

The interim report discussing the mobile landscape. These are some examples that are best tested using a mobile browser to understand it in context: the app; an example of mobile web and another with toggle functionality. Just prototyping...

Mobile Ecosystem

In order to avoid overhead congestion when content will then be needed, the report is my summary of what I've been reading in the mobile sphere; this was aimed as to possibly follow the web app application as opposed to the native app. The is not finished and it's just a collection of content while with the subject at hand. The report is an undergoing project.

Design Implementation

The implementation of the main menu screen; the interface is tested on the emulator and on the device. Minor issue with the "android:layout_gravity="center"...it's not centering at all the "Main Menu" text in the nested "layoutView" tag. Code here. It will be sorted. Still thinking if changing the buttons colour to follow design!

     menuInterface    menuInterfaceEmul

Progress Report II

The submitted version. It needs further enhancement such as references and most likely may be improved on redability. It fairly shows the design stage of the project. Sure, tutor will revert with a constructive feedback, upon which changes will occur.

Design

The following are screenshots of my first prototypes (Storyboards) of my remote control interface. Using Photoshop the design pretends to follow HCI (Human Computer Interaction) principles and mainly Fitts' Law; it says that "the time to hit a target is a function of the distance to and size of the target" - T=ƒ(d,s).

     my_home_screen    play_screen

     playlists    playlists   

Also the Structure Diagram that gives sense to the above storyboards.

     structure-diagram

Concurrent apps

The following are screenshots of existing apps, which will be under revision. Have been preparing the phone with those apps for trying them on. The respective servers need to be installed prior to evaluation. The apps are all free. Just to record the apps under evaluation:

my_home_screen

The above apps do not prevent the phone from sleeping. The following ones, though, do require the phone to be on all the time, which really contradicts the phone purpose. Theorically, the remote control function is only required at home. The phone needs to be operational all day when outdoors to fit the daily and mobile needs. This compromise the battery life, therefore were not considered. I believe that this evaluation sample is sufficient for the study.

battery_drainers    battery_drainers

Literature Review

The literature review had to be handed in right when it all started to make sense. Find the way was difficult already and when finally, the small pieces of the puzzle started to fit in, the document needed to be submitted via 'Turnitin'. It is incomplete; including the Control Device Protocol (CDP) and revise some similar existing apps in the market, are required. Also screenshots and better images in the literature review needs improving.

First app in device - prototyping

All the other apps have been deployed using the emulator, until now. MMU have phones to lend to students if they are relevant to the project, which in this case it is. I got that phone today. The next learning curve was to actually deploy an app in the phone. The HTC hero from MMU has OS v1.5 and so, the apps I have created (tutorial aided) have been using v2.2, which the emulator was made compatible to work with; it can be created as many emulators as needed to work with all the versions. We decide which versions/ packages we want to install when we add the ADT (Android developing tools) plug-in. I install all.

So, with help of this tutorial I developed the 'Hello, Android' app in v1.5 to be able to render it in the phone. If taking a screenshot from the emulator was straight forward, the same is not with the phone. Further, invetigation, taught me that from the 'sdk files', on the 'tools' folder, the 'ddms.dat' helps you doing this.

Item_List

Research Zotero reports

By this date a lot of time has been spent looking into Google Scholar. There was difficulty to access journals using the MMU 'Find it!'. Adding the difficulty to look to the right theme and area made it look like the research ahead was a hard one. Google Scholar was definitively helpful in finding the journals. Some of them are only available through the database and only now, the MMU subscription was bearing fruits; accessing these are easy now and being part of 'Athens' was very useful, too. This takes a long time. A summary from what was read needs to be submitted. Obviously reading continues...
The research as Zotero reports:

ToR, Gantt Chart & Ethic list

The submitted version and final(?); included bibliography; changed gantt chart dramatically and also changed it from days to weeks, for readibility; also submitted the ethic list.

Mindmapping

Preparing the literature review. The 'mindmap' tries to guide through the themes and areas of research.

Prototyping...

Playing with eclipse and still following the tutorial. This time, adding icons; changing icon per item in the list; and a temperature converter. Pictures below, respectively. Still using the emulator and v2.2.

Item_List

Item_List

Item_List

Prototypes - Items list

The first app was to build a item list. Following a tutorial on 'Froyo' (the last Android OS version), apparently with some bugs. The tutorial is available here. It's a quite long, the one to start with, but it really helps understanding. It is deployed using the emulator and it's for version 2.2.

Item

Project Diary online. Why?

Because it's a project. All bits and pieces related with project are to be concentrated in one place; actually, two! Because this have two sides to look at it:

1. E-mail mentor with material and to querry about guidance: keep both separate. Querry by e-email or other and keep material in one same place. It will be easier to trace at the end for the project redaction. Besides, it keeps a linear and visual approach on how the project is being done.

2. It works as a backup, too. It might never happen, but if it does(?), there are two places where the project is: the C:/ and the server.

It does help gathering all material that might otherwise be scattered around the place; focused mind and targeted action.

Besides, it was a good practice on HTML5 and CSS3. HTML5 is all semantics and much more intuitive. CSS3: finally the round corners without images! Lovely. The 'header' tag does not seem to work in Firefox, though! But Opera, Chrome and the IE Platform Preview (IE9?) render it nicely.