Client - Footworks - user testing

Footworks is 98% complete and so before signing off the product you can check out the final site here:

footworksbysue.co.uk

Whilst you're at it, fill in this quick questionnaire and let me know what modifications you would like implementing.

@

PRP - artifact #6 - chinese horoscope development

Original:

Feedback suggested that people liked the intricate background but that the content above wasn't easy to look at - jarring occurred. So, I tried altering the background to see if anything else would prove less distracting.

It appears not!

To help combat this I have altered the button text to white, added more shadow to the boxes and reapplied the white layer with opacity on it, whilst sourcing a really nice picture.

It has an ornate wallpapery feel about it, and usability wise, people have desktop background with app links atop them so it is feasible after some modification. JUST TOO CLASHING!!

@

PRP - artifact #6 - another design

I gained inspiration for this design after finding an iPhone app called Flickit.

Within the app itself it continues the rounded corner buttons look. Slightly different from what we use in desktop websites, the film reel slides left to right. It acts as an input required slideshow.

I decided to consider this design also for artifact 6.

This first mock up incorporates quite a few of the lessons I have learnt about mobile design.

1. Buttons should all be large

2. List menus work

3. Button menus work

Henceforth, I decided to put all these into one package. As an addition, I tried the status bar field at the top as well. I think similar pieces of information, such as twitter, would be sensibly placed up here where people see other data should as the phone's signal, time, battery life etc.

I proceeded to add colour and experimented with green. Originally bamboo was contained as a texture but soon replace in mindful of requiring even more data to download.

Personally it just didn't feel right. Green is for nature, and therefore didn't feel as appropriate as could be for horoscopes.

In its place I implemented the colourings of a client site I have designed and implemented: The Energy Specialist. Indeed, this content focuses around feng shui, Chinese Horoscope etc and gave me the inspiration for this app's topic.

I much prefer this styling. It is less garish, more sophisticated. The cappuccino beiges and pale greys blend nicely and are more in keeping with the idea of chinese horoscopes - metallics holding something of the mystical quality associated with astrological predictions aka horoscopes.

One change I will work on though is getting the text to stand out a little more and contrast. Gold upon darker beige, or white upon beige isn't providing contrast enough as is necessary for devices that are used and viewed in variable light conditions. Increased drop shadows should help in this instance.

Notably the images used are square and not rounded corners, which is something more often associated with iPhone. I wanted to try and create a neutral device design.

@

Artifact #6 - Chinese horoscope web app - design ideas

Having worked with a client before on Chinese Astrology, I thought I could develop something similar along those lines for the mobile web too.

Incorporating earlier designs which were a bit more unique in their presentation, I have mocked up the following two ideas in Photoshop.

One is quite modern in its styling - blacks, shiny metals and gold.

This design wouldn't look out of place on the iPhone due to the colours it uses. I think it may be a little too cliche and tacky though. I prefer sophistication.

Button wise, these should stand out due to the shiny edge that has been applied. However, the glossy effect is not present and so they don't instantly impart touchable button.

-----------------------

Meanwhile, the other design is a bit more traditional in that the idea was inspired by a Chinese watercolour.

Red and white are not typical colours you would assocate with Chinese for a theme but I like this diversity.

It still needs developing a bit more, the red buttons seem a bit overpowering and non distinguished from the heading. However, the glossy shade applied to the buttons makes them seem more touchable and this is good for usability.

I learnt last time that by applying a design that is specific to one device, ie using the iPhone app design on an Android, it felt odd. Psychologically people would think it off kilter. This design is custom and unique so is not associable with any OS.

------------------

Notably the buttons on the homescreen are all quite large. This is intentional. Also learnt previously was that the size of buttons could decrease as you progress inside the site.

@

client - Footworks user feedback suggestions

One important lesson learnt through user feedback has been that they couldn't find their way back to the homepage once they had clicked into the site.

More familiar users of the web would typically identify the logo as housing this link, and indeed, this was how I initially coded it for Footworks by Sue.

However, taking the comments on board, I decided to better illustrate the capabilities of the logo.

However the first person to use this modified version believed 'home' to be part of the company branding/naming. In short, it wasn't an effective solution.

Fortunately the follow up solution was very easy to implement. The navigation options in the site work because they are all laid out in an easy to follow format. With a spare place under the information column I added a 'homepage' link.

Now when people want to get back to the site's first landing page, they will typically search around the other existing options that they know to work and find this additional one.

And such to say, the homepage link issue hasn't been mentioned again.

@

Some useful jQuery plugins...

Want a sliding photo gallery? Growing and shrinking icons? Tabbed divs? Image-free buttons?



http://webdesignledger.com/tools/14-fresh-and-useful-jquery-plugins

More and more I'm starting to think its goodbye time for Flash. Apple certainly think so.

@

PRP - artifact #5 - Opera Mini 5 render

Unfortunately the Opera Mini render on their site uses a smaller than usual resolution device. Touch screen nowadays sport a resolution of at least 320px (thanks in part to requiring a suitably sized screen to accommodate finger pushes).

Like Nokia, the results were patchy and conflicted with the JQTouch plugin.

Watch the Opera Mini 5 run through.

CSS3 was missed completely. The acknowledgement of button touch was overruled by the browser's own styling, it didn't render at all the red overlay specified by :active in the CSS.

More importantly, it didn't allow the user to navigate to any of the sections. This was no doubt again a conflict between JQTouch and the browser regarding anchored sections.

------------

In all, poor and not very hopeful when thinking about coding an aesthetically pleasing, quick loading, cross-browser site.

@