Round up

I have finished everything I had to do for this particular project. Just a few small things have to be done to make all the projects working perfectly, but almost both projects are fully 100% working and up and running.

I have learned a lot about new ways of designing for different platforms and you can see a similarity which is valid thru out all platforms. It has definitely been a good learning curve for me design wise and I feel I have a lot more things to consider now before I start a design.

I believe that the executions and timing of my projects have been precise and on time I am glad that I started in Week 1 immediately, because the creation of the interactive TV flash file took up more time then I thought.

Persona's

To see in what kind of situations people would use this mobile website or interactive TV from nu.nl I have created a few persona's to clarify when people would make use of such technologies.

Mobile

Persona #1

Name : John Windsor

Male

Hobbies : news freak, browsing the Internet, watching TV

Age : 27

Lives : outside of London


John always loves to be up to date with everything related to general news, sports or films. Recently he has started a new job in central London and has to travel quite a lot with public transport.

His new job has provided him with a brand new mobile phone which allows John to go on to the mobile Internet. He heard from a friend that he could use his mobile to check the news on the go and be up to date where ever he is.


Persona #2

Name : Emma Stone

Female

Interests : Watching the news

Age : 31

Lives : Manchester

Emma likes to be in control of what she watches and what she reads when she is out and about. Emma has to travel alot for her job thats why she wants to be able to read and keep up with the current news and events when she is out and about.

Thats why she has recently purchased a brandnew iPhone so that she can be in full control of what she wants to read on the go.


Interactive TV

Persona #1

Name : Joyce Barnes

Female

Interests : Watching TV, Internet, Gadgets

Age : 23

Lives : Reading

Joyce loves to watch TV whenever she has the chance the only thing she finds annoying is when she catches something interesting on the news channel but is unable to catch the full story.

She would like to be able the most current news stories on her TV to find out what she just missed was all about.


Persona #2

Name : Darren Lee

Male

Interests : Watching TV, Sports

Age : 40

Lives : Twyford

Darren is always interested in what is going on in the sports world and always loves to view the highlights of all the sport categories of the last week.

The annoying thing he finds that when he is watching something related to sports that there is too much talking going on by the presenters of the program. He would rather just choose the segments he most likes and watch that or just read up on the latest sport scores.

Mobile web - final design

For the mobile website I have chosen not to overuse the use of colors or text just a simple introduction news header with other relevant news of the day underneath that particular article.



The navigation is very simple the user navigates with the arrow buttons on his mobile or the corresponding numeric values on his keypad to navigate the website and the links. Hyperlinks to different articles have distinctly been marked with a small bulletpoint image in the form of a small arrow.

The use of color has been minimised and I have tried to keep the images as small as possible in the actual size as in the weight in Kb. but still keeping a large enough picture to make clear what the picture displays.

Also I have made sure to include the alt text for the images so that people who have turned load images off in their mobile web browser still will be able to tell what kind of picture is displayed on the relevant page.

Interactive TV - final design

This is a screenshot of the final design that I want to use for the interactive TV assignment,



The design is kept simple and the navigation is easily controlled with the remote with the press of a few buttons.

Work fast and efficient without any delays or any long animations it is easy to navigate very fast thru the news categories.

Software

Mobile

For the mobile website I shall use the following tools to create the website,

- Photoshop
- Adobe Dreamweaver (XHTML)

Interactive TV

For the design of the interactive TV part I have looked into using emulators but this either required knowledge in coding or scripting in different markup languages.

So instead ive decided to simulate an emulator surrounding using flash.

tools used,

- Photoshop
- Adobe Flash

Nu.nl

I have chosen to re-design the popular minimalistic Dutch news website Nu.nl

I wil design a mobile website for this particular news website and I will also design a interactive TV channel for this chosen website.

Nu.nl is a popular Dutch website which is quick in bringing the latest news in polictics, sports, film, books, general, national, international and much more from around the globe and all for free.

Interactive TV - rules and guidelines

I have looked at some websites which dictate rules and guidelines about designing for interactive TV.

One of the more important rules and guidelines that are to be considered are,

- Use of colors
for example no red colors with a clashing background.
- Text size should not be smaller than 22pt.
if the point size is too small it can not be read on CRTs with smaller screens due to the native resolution of these older TVs.
- Work with a safe area
quote The action safe area, which guarantees that all of the major features of the picture will be visible. The title safe area, which guarantees that graphics and text will be visible and not blurred. /quote
- No fancy graphic designs
such as intensive gradients, drop shadows etc
- Work with anti-aliased imagery or and text.
This helps masking color alignment problems.

sources,

http://www.interactivetvweb.org/tutorial/dtv-intro/tv-ui-design.shtml
http://www.wqusability.com/articles/itv-design.html
http://en.wikipedia.org/wiki/Safe_area
http://www.efuse.com/Design/webtv-design.html

Good example

Here is a good example showed with an emulator on a Nokia N70,

mtld.mobi

The website is exactly how I got mine imagined as well. A simple graphical logo on the top and only the most relevant information is displayed with enough quick links at the top and hyperlinks through out the text.

The only I would have done different is the use of color because there is absolutely no color used whatsoever in this mobile website.

The Mobile Web

After some research it seems that to create the best and most effective mobile website is to keep it simple...

I have the following design principles lined out which I want to apply to my variant of a mobile website,

A simple layout with direct links to all the appropriate categories and maybe a here and there a small picture preferably 7KB or less.

Effective use of colour where appropriate to give the overall design a more professional feel.

Coded in XHTML and I am considering to use CSS but I might have to do some more research on that cause it seems that not many mobile Internet browsers support this.

Also graphic wise and layout wise some mobile Internet browsers display CSS or XHTML different so making it too complicated you might endanger the compatibility of the mobile website too much.

Research - Mobile web design

I found and interesting site with endless pointers / rules / do`s and donts at W3 schools,

http://www.w3.org/TR/mobile-bp/

There is also a informative presentation available by Cameron Moll,

http://www.w3.org/2006/07/Mobile_Web_Design.pdf

On XHTML,

http://developer.openwave.com/dvl/support/documentation/guides_and_references/xhtml_tutorial/index.htm