SPP3 - employment - web designer #9

Another good web design find, courtesy of the jobsite.

http://www.jobsite.co.uk/cgi-bin/vacdetails.pl?selection=934998433&src=search

HTML/CSS/Adobe CS4 Web Designer - Leicestershire - HTML/CSS/Adobe CS4. My industry leading client has a new requirement for a Web Designer. You will ideally be educated to Degree level and have proven experience in interface design, Adobe CS4, HTML, CSS, templating, with a solid understanding of front end troubleshooting/testing, fixing browsers. You will be joining a company that is experiencing a period of sustained high growth. Very exciting times ahead! You will be a key member of this team with the ability to communicate across the board with confidence.Salary is dependant on experience so apply with your CV now for immediate consideration!This role is commutable from Loughborough, Leicester, Coalville, Nuneaton, Hinckley, Coventry, Market Harborough, Nottingham, Melton Mobray and surrounding areas.

--------

This one seems another great opportunity at a location close to home. The skills required are all achievable for myself, being a Multimedia Graduate with a relevant degree and competency in Adobe Creative Suite.

The debugging required also is a fundamental component in a web designer's toolkit, that I have progressed in through my two years study in Online Environments. Working in a commercial environment should allow for an increased adeptness at achieving cross-browser functionality also.

The other details seem a little vague. Communication skills to inform and explain with the company's other departments and clientele can be provided through commercial experience in face-to-face and telephone customer service positions.

Hopefully these sort of company will be about in June/July time as I feel they offer a suitable junior entry position into the industry.

@

PRP - artifact #3 - user testing

The user testing proved useful, a sample video available below.

The repeated navigation options were useful, accommodating the range of user inputs: some using the labeled back button, others the browser back button, in addition to the footer navigation links.

The main problem observed, and also acknowledged through user feedback was that buttons were difficult to activate, often requiring several repeat attempts.

Image compression helped alleviate lengthy download times somewhat. Performance on 3G and WiFi was acceptable, however 2G speeds suffered making loading times a frustrating experience.

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

From the results, buttons are highlighted as causing usability problems when not suitably presented. Designing and testing buttons in various shapes, sizes and colours will be a worthy experimentation area, also allowing consideration for graphics compression. This will be my next area of focus.

PRP - artifact #3 - iPhone scales down

I spent a little while scratching my head as to why the iPhone was shrinking my design. Here's why:

Coding webpages for the iPhone

Worthwhile to know.

@

PRP - artifact #3 - mock up designs

After a working on a few variants of designs, I think I'm getting somewhere in providing a nice alternative to the plain white design currently used.

1. Photo frame

This first one failed largely due to the frame I think. It's a nice idea trying to frame the photographers work within one, but I found it limited valuable screen space. If worked on a little, for instance, trying to get an ornate frame etc then this could go somewhere. However, the haphazard layout of the content didn't really help.

2. Big icon/buttons

Keeping the white theme used on the original, but adding subtle grey gradients, I thought that images were important, being quite an obvious design choice. Furthermore by doubling the way people can understand each link (you have text and the image) it makes for hopefully easier usability, in a sturdy grid structure, advancing on the last design's drawbacks.

Unfortunately though, it still felt a little lacking, a little flat. This partly is due to the nature of his job. Obviously you want professionalism, conservatism, not bright and brash colours for a quality wedding photographer.

3. Showcase the photographs taken

I instantly like the direction this goes in. It's not usual for mobile web, namely due to images like this not displaying correctly on the multitude of devices out there. However, what was established early on in my research was that touch screen phones all tend to have a reasonable sized screen to accommodate fingers. In turn, being touch screens they are modern with fairly reasonable resolutions - typically 480x320.

This one ended up looking a bit too theatrical, with the red curtains. But it put me on a good track. The contrast achieved with white on black will certainly lend itself to legibility, but at this stage the links didn't look too much like buttons.

I rotated the logo to increase space, and decided to try links in the top of the page - where the user will tend to me looking first, and most importantly, changed the picture. It again pulls the eye in and stands out through contrasting with the black menu. The transparency may need to be a bit increased though, as I want the picture to shine, not just the menu.

I included the arrows after each link, a popular convention, to demonstrate that they will take you somewhere when clicked on. This is a little technique picked up to aid cognitive understanding.

Having run out of space for the contact details, I decided to go with a message icon. Being aware of the detrimental effects ambiguous icons/images can have, I believe that the envelope should be pretty informative should the user be looking to write a message, or obtain the email address. Obviously, this will be proved/disproved in user testing.

For some variation I tried another photo and believe I have hit the right note. It incorporates beautifully the classiness one would expect of a wedding photographer, complemented by the non-standard typeface. How to implement this custom typeface will be an important lesson learnt.

This design links in well with the desktop site - a minimal white affair. Furthermore, the buttons are all well spaced, should be easily tappable and also easy to comprehend, having provided only the staple mobile content necessary. It may look a little too pasty in comparison with the previous iteration, but I believe that using gold as the third colour in my palette will work nicely, adding that touch of quality and class.

--------

So far so good. I have good hopes in accomplishing what I set out to do for this artifact - promote design as a valuable commodity in mobile websites.

Now to build it.

@

SPP3 - CVs

Found this article online from Yahoo and it offers a few tips, most important one being to not talk about "responsbilities" but instead achievements on a job...

Looks like my CV might need updating again!! Obviously it's a case of what the employer wants, but I agree with what is said about concreting achievements, making you seem a more attractive candidate.

http://finance.yahoo.com/career-work/article/108853/10-resume-red-flags

@

PRP - artifact #3 - load times and images

Bearing in mind that I want to take a designed route for the third artifact, I'm considering components that are typically no-no's on mobile devices - custom fonts, and images.

Unfortunately, these all add to the data download needed to get a page to render and don't all function on the browsers. Therefore, there has to be some work for this experiment: optimization. I will be taking note of download speeds over WIFI and 3G.

Got this tutorial which should sort out my problem. If images are turned off, the links will appear and work, whereas if they are on, the site will look lovely.

@

PRP - artifact #3 - a few words on the Josef Samuel mobile site

When considering the design for the modified photographer site, I thought it wise to look at what works, or what doesn't, in the current design. This can be viewed in regular browsers on the following link. Make sure to reduce the window of your browser to that roughly of a mobile screen.

The links are laid out in a now typical list form. I don't see what benefit is achieved through numbering the options, but the arrow at the other side of the page does help indicate some sort of navigation associated with the link.

Notably also, the whole bar within which sites the link name works as a link, not just the text. This is good for user interaction on touch screens - it limits the difficulty in activating the link. Furthermore, whereas hover is useful for desktop design, here, active link styles are worthwhile, this clearly showing that the desired link has been chosen, limiting any repeated pushes from the user and slowing down the transmission.

A back button is provided at the top of the screen, this is good because alongside the arrow shape dictating the direction the page will take the user, Back is also printed. You recognise its use much quicker than the browser's back button. In light of seeing this, the browser's back and forward buttons, tucked away or on show depending on the model, soon become forgotten, or redundant. Furthermore, the button is in the main viewable area that the user will look at. This was noted as an important feature in my last testing session, to aid efficiency and usability.

Unfortunately, the text is all bunched together, with little spacing and appears uninspiring to read. Simply breaking it up would easily remedy this or inserting subheadings, aiding and appeasing the typical scan reading of a web user.

For saying this acts as a photographers mobile site, the gallery option isn't the most user friendly in its use.

The whole screen is filled with the image, a good thing, in its really decent resolution for the page. It makes for a good impact on the user in light of the barren website experienced previously.

However, where one expects to swipe down, or perhaps across, to see more photos, nothing happens. Instead, a tiny arrow button has been included at the top of the page, alongside a homepage link. This proves fiddly to touch and activate.

Elsewhere, the contact details provide what is considered a real boon on a desktop site, but on a mobile site, something of a faux pas. The contact form below may concentrate what users send as an enquiry, but having to input data into each of the seperate boxes, on the keyboard will likely prove offputting to a fair amount of users.

Fortunately, the email and phone details are available below, but this data seems a tacked on decision. Importantly however, the phone number and email are links, so when viewing on a phone, the email should at least activate the device's email application, hopefully better in its setout and usability, or alternatively, place the call. The most fundamental reason for owning a mobile phone!

Useful pointers can be taken from this original design. Notably, active link styles, back buttons and spacing of content. Importantly again, images prove a real treat on the mobile screen. Their impact is easily recognisable in light of the much muted visuals elsewhere. A worthwhile thing to consider...

.....Now onto the improved design!

@

PRP - artifact #3 - Josef Samuel photography iPhone site

I'm beginning to get under way with artifact #3 and so it has come to the time to decide which site to give a make over.

Entries I considered included eBay and Amazon, although to a certain extent, these are half reasonable attempts at a mobile site when viewed in their optimized forms.

I then considered where or what the mobile web would be used for. Search being a primary motive, I wondered how yell.com fared. Unfortunately, although mobile formed, it lacked any real styling, which is a recurring theme across most mobile sites, due to the limited technical capacity of most browsers.

The offer to try the app proved uninspiring too. It basically was a ported version of the mobile site.

------

It was from here that I decided to try and rejuvinate a site that has taken some steps to try and represent an iPhone app user interface but in the browser - Josef Samuel - a photographer. I used his image in my evaluation for artifact #2, inferring his mobilized site to be an example of hyper-efficiency in the face of hardly any styling whatsoever.

His full site is minimalist, white lots of white space, meaning the images really stand out in their large dimensions. This is somewhat reflected in the iPhone version, being super basic and incorporating lots of white. Notably, it is only the iPhone that gets served a mobile version, Android et al go to the main site otherwise.

It is this site that through colour, graphics, layout and structure that I hope to provide some visual interest that will also serve a purpose of increasing the effectiveness of this site. After all, a photographer really is all about the image, as demonstrated in his big screen version.

@

PRP - Mobile web design gallery - good, bad, ugly

It's not that surprising the direction that mobile web design has gone in. Namely, most designers have tried to provide for a platform that requires efficiency. Consequently, you get a lot of lists, some styled, some not even that, for menus and links.

LISTS

Notably, the colour scheme that goes alongside this list can have a highly influential effect on how you initially view the site. The three second judgement that people make on a desktop site will work equally the same for mobile, if not faster.

The top right site, mind[medium] works well because the large text would be easy to read whilst using your device mobile and also the contrast of black on white proves to be helpful in such circumstances too. Furthermore, of the four examples, it offers the biggest buttons, another good thing to sport in mobile interfaces.

-----

LISTS with ICONS/GRAPHICS/IMAGES

Again, this tries to take the list format efficiency one further by providing an icon that should hopefully help inform users of what to expect from the link. The only problem with this comes when the graphic is too broad in its meaning and so confuses more than helps.

These offer much visual interest and where colour is used, it really brightens what could otherwise be a very uninspiring page. For instance, which one would you rather be interested in reading? AZTEK or ARCHIMOBILE? Obviously it's a different story when it comes to which is the easiest to read.

-----------

ICONS BASED MENUS

Inspired by the iPhone, or even going back to Nokias that adopted tile based main menus, the following are another viable option for navigation. Importantly however, it does take time to search through each of the icons to find what you are looking for. This wouldn't be the case with a big text link.

As can be seen, the icons make for a much slicker, more stylised interface. The only concern would be about how much extra data this would add to the page'a download, however I'm sure with thorough optimization, it could be remedied somewhat.

-----------

ALL OUT IMAGES

Having never really seeing anything like this on the mobile web, its difference attracted me. In particular, the WATCHMEN site looks really good on a mobile device and indicates that design can play a part of mobile design. They look almost magazine like. It is this sort of design that the iPad will probably lend itself well to for e-magazine subscriptions. Its worth a try on the smaller screens too though I think, see what lessons can be learned.

Leading on from here, a number of sites seem to have managed a nice inbetween, utilising images and text for a layout that is more in keeping with .com designs.

It is this mixture of image and text that I think needs developing for mobile web. Too many text heavy sites (although having their place) need counterbalancing with a design scheme that can benefit.

These sites have certainly given me inspiration for wireframes/mock ups for my next artiface - users choosing a designed site over a hyper-efficient one.

@

SPP3 - education - MSc in Internet and Web Technologies

Keele University is actually a place I applied for in the UCAS days, and visited the campus in the countryside, so know it to be a nice place. Their page on this Masters is very detailed, listing almost too much about what modules you can take on the course, but all are really useful and worthwhile components in a web designer's tool kit.

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

MSc in Internet and Web Technologies

*Highlights include*

Core Modules:

Networks and Security - In this module students will gain an understanding of contemporary networks, together with the abstractions and protocols that underpin them. Students will reflect upon the appropriate measures to adopt in order to secure information held within an organisation, and communicated across networks. Finally, they will be able to critically assess the software and hardware architectures that may best assure security in typical scenarios

• Web Technologies - There are a number of key technologies that enable the creation of modern, web-enabled enterprise systems. This module provides students with the skills and knowledge to support the design, creation and maintenance of such systems

• Professional Practice - In a business environment, professional skills are just as vital as technical abilities and knowledge. This module provides such skills, to include project management, team building and team working, and communication skills. It also provides knowledge of the ethical, legal and social issues relating to the development and deployment of information technology. Speakers invited from industry will give some of the lectures

• Systems Design - The provision of appropriate design is critical. This module will provide skills in software design and its implementation. It will impart an understanding of the issues involved in design and implementation of business information systems, such that students can participate in and, if required, manage such activities

• Applied Web Technologies - In this module the students will build upon the concepts introduced in the Web Technology module to consider the building of commercially viable Internet or Web applications. We will consider the technology, its application and a critical evaluation of when and where to apply the approach. A typical example of such a technology would be AJAX where we would consider what it is, its strengths and weaknesses and what alternatives exist where it is not appropriate


Option Modules (15 credits each)

Students choose one option module only.

• Content Management - In this module students will study the use of modern, web technologies in the provision of secure and reliable content management systems. They will obtain an understanding of the techniques and processes involved in the design and implementation of such a system

• E-Commerce - Students will explore the creation of modern business systems, through a module providing a theoretical and practical understanding of the problems involved in the development of web-based, electronic, commerce applications.


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

I think this course offers a lot of valuable learning - such as content management systems, e-commerce - all valuable assets to be equipped knowledge wise with, as employers so often ask for this. What's more, by being a MSc it should help boost your pay packet too, over regular junior web designers. ]

Once more I am quite interested in the degree, simply because it would help fill in the gaps that my undergraduate studies hasn't had time to concentrate on.

@

SPP3 - education - MSc IT Consultancy

This is a slight off shoot, but does tie in well with the part time work I have been doing for Silver Surfers. It is certainly a viable market to try and establish myself in, as the older generations really do appreciate what modern day technology can do for them, i.e. video calls, emailing, photography.

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

MSc IT Consultancy - University of Kent

This unique course prepares graduates for a career in information technology (IT) consultancy, particularly in relation to small and medium enterprise (SME) clients. It provides:

• The opportunity to learn consultancy skills in the environment of a real IT consultancy, theKent IT Clinic (KITC), working for local SMEs.
• The development of knowledge and skills that are highly sought after by employers and which open up a wide range of careers to graduates, within computing and other professional fields. IBM UK has been a strong supporter of the work of KITC since its inception, precisely because of the skill set it imparts to students.
• A firm grounding in computing including up-to-date coverage of key industrially relevant topics.
• The opportunity to combine modules relating to computing with a selection of modules taught by the Kent Business School as part of their Management MSc programmes.

The course may appeal to graduates seeking a career in consultancy or to practising consultants wishing to round out their skills and achieve formal academic recognition.

-----------

Really liking the looks of this course. The modules that you choose in the latter stage of the course are also really varied and would be of worth to learn, particularly if you wanted to be a self employed consultant, or digital media freelancer: financial and management accounting, computing laws, contracts and responsibility, networks and network security.

The main boast of this course is that there is a one year placement, again, proving great for your CV and also real world knowledge of the job.

What with my baby steps into this type of employment, I am quite interested in researching into this a little further. Part time or distance learning would be a great option - learn whilst you work.

@

SPP3 - education - MSc in Mobile Computer Systems

As time goes on, I'm finding that my research area into mobile devices is opening up more doors. Specialising for a Masters therefore could be a beneficial option for the future as mobile is often being touted as the new thing to be in and working on.

---------

University of Staffordshire - Mobile Computer Systems MSc

This MSc is a computing postgraduate award that provides an individual mobile computer systems flavour for students that already possess a first degree in computing. The major focus of the award is placed on technical and specialist issues of mobile computer systems in order that students learn to develop concepts and theories taught into small mobile computer systems. Students will study topics such as artificial intelligence, imaging, HCI, networking, communications, design of mobile architecture, network infrastructures, standards and protocols, mobile programming tools and environments, and associated management issues. The award also aims to instil sound academic and professional skills required for lifelong learning and development.

WHAT YOU DO
In the PgC stage of your award you study a networking module and three options related around mobile computing. At the PgD stage your knowledge is developed further by study of three mobile modules and an option. At the end of the PgC and before the dissertation is started you can go out on a placement for 12 months. The dissertation forms the final stage of the award and is related to a mobile computing subject.

WHERE YOU CAN EXPECT TO GO

A graduate from this award is likely to find employment in one of the following areas: mobile networking, mobile systems development, Interaction Design, Internet Applications, M-commerce, mobile databases, or mobile multimedia. For high achieving students a PhD could be pursued within the Faculty’s large mobile research community.

CONTACT
For more information about Mobile Computer Systems please contact:
The Recruitment Centre
Faculty of Computing, Engineering and Technology
Staffordshire University
Beaconside
Stafford
Staffordshire
ST18 0AD
t: +44 (0)1785 353565
e: fcet@staffs.ac.uk

---------

I like this course for the fact that it seems a decent community of mobile based engineers, technicians, creatives all input, rather than a superfluous random course with little backing.

The topics on offer seem really interesting - artificial intelligence, human computer interaction (HCI), standard and protocols. I feel through studying this course I would gain a greater overall balance of skills - existing design skills, and technical competencies through this largely engineering/technology course.

Lastly,to complete the MSc you take a 12 month work placement. This would be great, as so often experience is sought after for job advertisements, whilst also providing me with hands on experience and implementation of the technologies that you learn about.

@

PRP - artifact #2 - results

The second experiment pitched the two primary mobile design movements (miniaturization, mobilization) against each other by tasking users with typical browsing activities.

After finding out that mobile eBay amassed $380M it was decided that their mobile site and app based platforms might uncover key techniques to aid mobile interface design, based on how they are really excelling in this mobile field.

Tasks:

1.Search for a product and view the listing – typing input

2.Look at the photographs – less text heavy, should be easier than reading

3.Add item to the ‘Watch’ list – for status updates, easier to follow

4.Look at the sellers feedback – star rating, again, less reliant on text

5.Remove a surplus product already being watched in the eBay account – smartphones becoming more task focused, organisation tools too

-----------

It was predicted that the mobilized eBay app on the iPhone would gain the most approval through providing more relevant options and allowing these to be navigated far easier due to its touch screen friendly user interface.

mobile site, mobile app

MOBILE SITE TESTING:

People liked the mobile site for its repeated options making the chance of succeeding easier. However, the tiny, difficult to push buttons made for a more difficult experience.

MOBILE APP TESTING:

Users appreciated the better presentation of content and easier to use buttons that incurred images and text. The main gripe about the app was that important options were placed at the top and bottom of screen in unnoticeable colours. This meant more time searching the screen - a no, no.

Above all, I learnt that usability is king to users. This comes as no surprise really and is in fact, more of an issue when using your device on the move. Surprisingly however, half of those who took part still preferred the miniaturized HTML mobile site due to being more cohesive with the desktop counterpart.

-----------

For my next test period, I hope to implement an effective, worthwhile mobile design scheme, to attempt to reverse the under-appreciative design feedback that was noted through this second artefact test period.

I will try and make people understand, appreciate the value of a designed site, over one that is hyper efficient but non-stylised.