Conclusion

The objectives of my project are as follows:

1. Create a simple user interface
2. Provide screenshots of all exercises
3. Use either the SDK or Adobe Creative Suite 4 to develop the application
4. Use PHP and jQuery to complete my application
5. For the user to be able to interact with the application to a certain extent

The project in question is a prototype application designed for an Apple iPhone/iPod Touch that is designed to be used in the gym.

The application named GymFit acts as a buddy application. It allows the user to input a workout to have the application generate one that is specified for certain body parts of the user’s choice. The application logs each exercise individually but also keeps track of history overall monthly and yearly. This information can then be uploaded to the GymFit community that the user can sign up for directly from the application for free.

The application is only a prototype, however it can be used on an iPhone to a certain limit. The user can operate most buttons but functionality is limited as most functions appear as images to represent the function. This prototype can be viewed on an Internet browser, because the code detects that it is being viewed this way a home screen will appear at first with the GymFit logo adding authenticity to the prototype.

Now that the premise of the application has been set out, it is time to discuss the prototype’s fallbacks and disadvantages.

From the beginning of the project there were two options to follow to create my project. Firstly was to create an application with Apple’s SDK package. The advantages of this would be a real working application approved by Apple which could then be sold on the application’s store.. However when the choice came the disadvantages weighed out the advantages compared to building a prototype in fireworks. The disadvantages being a lack of complete knowledge of the actual SDK package. But the most time consuming would be the learning curve and writing X code, the code used by the SDK package. This would all mean less time being spent on the user interface and overall design. If I had more time to learn both points I would implement my prototype into the SDK package having a natural progression from a prototype to a running application. This is obviously the prototype’s disadvantage as it’s not a real application but I am pleased with the prototype’s usability.

Creating a simple user interface sounds like an easy objective when first read over, however to put this into practice is much harder as the space the phone provides is not a great deal so getting everything on screen for the user in a minimalist way was quite a challenge. Trying at first a few designs with the software it became a apparent that planning and structure were essential. Creating a flow chart the application’s processes could be visualised and understood because the logistics of having multi functional menu’s. For example, the user could find themselves deep in a menu system and they want to go back to the home screen, the dilemma was do you let the user click five or six previous buttons at the top of the menu causing sometimes a crash, loss of data or slowing the application down. Or would a better idea be having hotlinks at the bottom of the application permanently on very page allowing the user to quickly navigate to the major pages. This example is a problem solved due to the process of the flow chart., this also came quite handy in the next process of hand drawing each page which would be then designed on Adobe Fireworks CS4 allowing me to finish early February, two weeks earlier then planned.

In my objectives it states “ at least two images for each exercise”. During my project critical it was brought to my attention that instead of images for each exercise movie files would be a better idea. When the implication of movie files seemed impossible because of this being a prototype the next step was to try animation GIF’s. Trying a few different methods documented in the project blog but each method failed. Images were in my original objectives as stated above but being self-critical implementing animation GIF’s would have taken to prototype to the next level.

A disadvantage of the prototype is that it is 0nly tested up to 30 pages. The prototype originally had up to 70 pages but undoubtley had to take it down significantly to make sure the functionality of the prototype was stable enough to operate correctly.  If more time was available investigating the code could be an option. In all honesty overlooking this point was a bit of a downfall on prototype as designing the prototype was a main focus until the technical side was a priority. A point to make this was found out earlier than I should have due to the nature of my research into the technical side while still designing to keep on top of all aspects.

I found designing my application at first hard work and time spent thinking through the application’s structure did not come very naturally and I had to go back to my research after presenting my idea to my lecturers.

Exporting the prototype to gif you want PNG’s for better quality appearing on the iPhone.

The quality of the images was an issue; GIF’s seemed to appear slightly pixalated compared to the PNG files type. I came to solve this problem though easily once finding out a separate function able to render the page separately while designing making sure it would save in the PNG file format.

An obvious floor with the prototype is the lack of the use of the accelerometer, which in this case would let the user turn the phone horizontally and the application would turn with it giving the user a landscape view of the application. The prototype could not handle the accelerometer. This becomes obvious when the application is turned horizontally; it stays in portrait mode with the dimensions of the phone in portrait. Thankfully my research had shown that no other applications used this function as it seemed to not have a use for such an application except on for video playback, which is not an issue for this application as, discussed above.

Application handed in

My application has been handed in so in terms of development, testing and research have stopped. The link for the final application is as follows:

http://www.dccs52.net78.net/v.1gymfitiphone/

you can follow this link on either a web browser or iphone and will open very fast on both though on the iphone 3g or wifi is preferable.

Over my next few posts i will post an evaluation, screen prints and general points about the application until the deadline of the Blog hand-in date  May 10th.

End of project

Last post i listed waht was left to do, the list is below and all red text are completed.

+ missing from all exercise pages

Graphs need to be more specific

Custom workouts final arrow button on crunches directs to index instead of workout complete

Log entry for lateral raise and crunches directs to the bench press log entry

Some pages are set as GIFs, not JPEGs

Body areas page needs text

Clock on exercise pages needs moving

Arrows on exercise page when the user is working out need to be re sized and moved slightly.

All dead links need to be made red

1. + 2. need to be moved on exercise pages and custom/auto workout

Update keyboard for numbers instead of alphabet

Add a log-out button to the community page, OK/cancel selection

Add pre-caution screen before exercises begin

Log entry icon needs to be changed, looks to much like upload icon

Add measurements icon

I am now up to V.11, which i will show my lecturer for the last time tommorow.

The next post will be any final improvements and a final test of all links.

Final stages of testing

I am now in the process of final testing. I have so far got to v.7, each version being tested, then updated by the next one when the problems that have arisen have been solved. my process of testing is simple. upload the latest version and use like a user would and allow others to use it and document as i have below problems that have arisen.

In recent tests the follwoing problems have come up in V.6:

1. + missing from all exercise pages
2. Graphs need to be more specific
3. Custom workouts final arrow button on crunches directs to index instead of workout complete
4. Log entry for lateral raise and crunches directs to the bench press log entry
5. Some pages are set as GIFs, not JPEGs
6. Body areas page needs text
7. Clock on exercise pages needs moving
8. Arrows on exercise page when the user is working out need to be re sized and moved slightly.
9. All dead links need to be made red
10. 1. + 2. need to be moved on exercise pages and custom/auto workout
11. Update keyboard for numbers instead of alphabet
12. Add a log-out button to the community page, OK/cancel selection
13. Add pre-caution screen before exercises begin
14. Log entry icon needs to be changed, looks to much like upload icon
15. Add measurements icon

checklist update

Up to my deadline i have left to do:

1. Upload old sites to new server
2. Upload V.5 to new server

Done

1. After checking V.5 i have come across these problems and now solved them
2. Logout button needed on community page
3. Correct Links from text to image on custom workout program
4. Previous button needed on measurements page
5. Swap over edit page with upload to community button 0n Custom workout 1
6. Resize Logo for iPhone

DONE

Update to application + Checklist

I have since changed the logo for the application as seen below. I have used the colour of the application in order to keep the consistency of the application. The only negative from this is that the colour is navy blue which is quite dark on a black background on the springboard of the iPhone. However i have decided after viewing this that it works well.

I originally created this design however i did not feel it was fitting with the theme of the application. Though i do feel its eye catching.

I have also updated all the technical and design issues that were described in a former post in V.4 of the application. The newest update is V.5

The changes made are:

1. Resizing of resolution to 72 pixels
2. Correcting hotlinks that went to the wrong pages
3. Adding a black bar to the top of the application
4. Correcting the quicklinks on the treadmill page
5. Adding a new logo for the text to image for each exercise
6. Shifting of the clock on exercise page when the user is working out
7. Moving of the next/previous exercise  button
8. Resizing and reposting of text
9. Adjustment to logos down the side of exercises, (smaller)
10. Monthly graph was changed to white from black
11. Reposting of community page
12. Smaller exercise demonstrations

Up to my deadline i have left to do:

1. Upload old sites to new server
2. Upload V.5 to new server
3. Design Body Areas page
4. Improve measurements page
5. Check Links work
6. Email Garrett about how to exhibit application
7. Update Blog
8. 1000 word evaluation

New website for Project

www.dccs52.net78.net

This is my new website where my final piece will be uploaded to for marking

Final design Trials + NEED TO COMPLETE

The resolution has been a problem for me. I had turned the reolution up to 200 pixels, however the iphone template while in an internet browser just did not fit, and the size of the file was over 10 mb which meant longer loading times which defeated the object of converting the files from .png to .jpg. I have now lowered the resolution to 72pixels and i will update to see if this has corrected the problem.

As you can see i have input new icons into the the design, measurements is missing because i have yet to find the right icon for this.

The icon for the application has also been redesigned and adjusted to fit better within the list of other iphone apps when the user adds it to their home-screen. Below is the new icon i have created. The icon uses one of the images within the application to give it a thematic look, so the user is familiar straight away with the look.

I may change the background colour of this because i am not entirely happy with the colour.

I have added new pages and functions within the application. The two new functions are the:

1. The community page has been designed

2. There is now a button the exercise page which allows the user to read text about the exercise.

NEED TO DO:

1. Measurements logo

2. Body Areas page needs a human body image

3. Change the colour of the background on the icon

4. Icon for image view on exercise, maybe an eye logo

5. Maybe a black bar at the top of each page

Design

i am currently in the process of giving the application prototype a graphical and UI overhaul. Below you can see the new logo;

I felt the colour blue worked best, and after follwing some interesting articles on iPhone logos i choose to use an image from within the application to give it that fluidity from start to finish, which i believe will work well.

Below now is the theme colour i have chosen which is an ocean blue. You can also see the text has been changed to white, and the list of exercises have animations by the side of them which make it easier for the user to choose the exercise they wish to perform.

I have also updated the resolution on all pages now s they will appear in very high defintion, this will mean a little longer loading times however i think this is worth the change due to loss of quality on the existing tests i have performed on my website:

www.dccs52.comlu.com

The next part of the design stage is to:

- improve the actual exercise pictures into a higher resolution

- put the text instruction and image of exercise on a separate page

- create the home page of the community function

THE DEADLINE IS APRIL 26TH

iPhone app icon design

There is a good article in iphone app icon design which i have found very jelpful as i am designing this at the monent.

http://pixelresort.com/blog/iphone-app-icon-design-best-practises/