more specifically, glo was built to be an online example of my drive to constantly do things better. here i experiment with new technology, new methods of page layout & new ways of shaping the user's experience within digital media.
Although the two technologies use similar resolutions (at least when an iPad is orientation: landscape), good design for handheld devices requires some very different thinking, compared to conventional user experience for laptop/computer based design. Upon beginning the process to create iPad/tablet based layouts from the current conventional JCC intranet mock layouts, one key difference in layout methodology started to become apparent to me.
In conventional design, because a movement of a mouse can be controlled so accurately in selecting items on the page (down to almost pixel for pixel accuracy) web design often entailed fitting a lot of information on the first screen fold, ensuring that said content would be visible without the user having to go looking for it and scrolling down the page. I was always in 2 minds about just how familiar web users are with scrolling down the page, and often tried to influence my clients toward spacing things out more, increasing text size and creating more white space – aiming for some kind of middle road between two extremes. Having said this, quite often in commercial ux design, it was hard to convince some clients of the merits in such an approach and hence designs often end up being squished so that the bulk of them fit In the top screen fold of the design (at least for the most common resolution size to render the website).
Tablet and other touch based devices seem to reverse this trend however – instead interfaces and ui elements need to be treated more carefully regarding whitespace and size. Buttons need to be bigger, and interface elements need more space around them, so that they can be touched without risk of accidentally touching another element and so on. Of course this approach inevitably sacrifices the amount of content that is immediately available to the eye upon page load (without scrolling) – but this is not the end of he world, and almost definitely the lesser of two evils. The reason I say this, is that, scrolling on a touch device is so much more natural (at least to me), than trying to point out, read and interact with ui elements that are smaller than my (somewhat wide) fingers.
Applying this methodology to the iPad version of the jcca homepage, I began laying out a similarly structured mock, this time with an emphasis on enlarging interface elements – consequently lengthening the page layout to be two or three fold, instead of one and a half. Inline with this, I removed the navigation from the header and instead created a bottom navbar more akin to iPad applications. As fixing the nav bar to the bottom of the screen using position:fixed, isn’t possible on mobile webkit browsers due to the way they handle overflow:scroll, a small amount of simple JavaScript (along with a plugin called iscroll) may be needed to achieve this. The removal of the navigation from the header enabled the welcome customization to be moved to the header area, and allowed me to remove the entire personalized row, freeing up some much needed available height.
For the orientation:landscape layout I decided to keep the three column layout, as 1024px is more than enough width to display three columns of information, and readability can start to decline the longer lines of text get in width. To keep things simple, the page layout clean, and unnecessary image downloads low, I did away with the drop shadows on either edge of each column.
For the orientation:portrait layout, instead of simply allowing the default ipad functionality to zoom out and show more of the page’s length, I decided to vary the layout slightly. Replacing the two wide columns and one thin column, I Stacked the two wide columns on top of one another, which allowed the text size for the whole page to stay the same, thus not compromising readability in either orientation mode. Reverting back to a two column format also enabled me to display two articles alongside each other at a time, whilst not sacrificing space or text size, and increasing readability (I found the two columns of text easier to read than one wide column).
Due to the massive reduction in available width, the portrait mode logo area is designed to revert back to a simple logo motif, separating out the logo type so it can be reduced down and redeployed to the top left column.
As with many intranet development projects, the John curtain college intranet was designed to be functional, yet friendly to it’s intended target audience (all school staff and students) to encourage frequent use, contribution and active collaboration. It was also to strongly follow the designated style guide and aesthetic that was adopted for the public website, some years ago – the faint diagonal lines and color scheme are all derived from the existing jcc brand.
The target technology of this intranet is centered around Apple products – namely MacBooks, MacBook Pro’s and iPads (as this is what the school is choosing to provide for all staff and students). Because of this, I was able to take advantage of a lot of new technology (CSS3, HTML5) without the extra work required to avoid less-than-graceful degradation in Older browsers. Also, given that when viewed on a computer, this intranet would most often be viewed in wide-screen (as the apple laptop offerings all come with a wide-screen (1280px) format monitor) I opted to use a fluid 1140px grid system layout, which can shrink down to a min-with of 990 if necessary, to accommodate lower resolutions.
Using the current John curtain college website as a starting point, I then began to consider a homepage that would focus the student/staff members attention, introduce the most important of the intranet’s functionality as a high level summary (according to the client these were to be daily notices, a comprehensive event display system and a look-in to recent file activity, allowing the dashboard to act as a simple snapshot for all the work that each staff member / student is currently engaged in) and provide simple access doorways deeper into core site functionality.
Starting out in the design process, I decided from the beginning that (similar to the public site) the header should be bold, well spaced out, and ideally personalized by whoever is looking at it. This accompanied by appropriate amounts of meaningful content, would help in capturing the browser’s focus, which of-course is a common kpi in most application / website’s home pages. It was therefore my intention to make this area the focal point of the page layout. Where possible, I tried to stay true to usual ui conventions (logo top left/center, user functionality top right, search top left) as this is what people are used to when interacting with digital interface, seeing little reason to move away from the norm.
Also In keeping with the intention to keep the interface friendly, where possible, I have also tried to keep buttons and interface elements large and rounded – these characteristics I often find synonymous with friendly, informal layouts, such as Vimeo, to state one example.
Working n the header area if the layout, It did dawn on me that some users (perhaps even all frequent users) of this intranet will most likely choose (if given the choice) a smaller, more impact header area, to allow more space for the real content of the site/app/page. To make allowance for this, I thought I would use some simple jQuery to include some functionality that empowers users to further customize their dashboard, by toggling the display of the header and welcoming messages, and saving that state through use of cookies.
For example, When the arrow button is interacted with (which will most likely need to be coupled with some hover pop-up jQuery enhancement, to make its purpose clearer), the header could revert to something more akin to the proportions of the internal page design.
Following from the header area, it was my intention to draw the eye downward to the next most important area, the dally notices board stream feed. I waned this area to stand out amongst the other content areas, as this was one of the more important functions of the intranet. giving it a solid Grey/blue head, seemed to give it the emphasis needed, to move the eye down the page from the header area, into the page’s main content area. I thought it advantageous to treat the first notice in this listing as special, to help highlight what might be considered the most important notice in the stream, the most recently posted item.
Continuing with the layout, I intended to configure the hierarchy and coloring of the headings to further maneuver the eye across the to the other areas of functionality in this layout, the school events and recently used files section. To avoid clashing too much with the flow of the eye, I kept the listing data relatively low-key and neutrally colored, as I have often found that using harsh black on white can sometimes create visual noise in page, which can in turn confuse the intended movement path of the visitor’s eye. Legibility is still paramount however, which is why I chose to use a contrast ratio of xx:xx (recommended for maximum legibility) for the various areas body/article copy.
The footer was designed to gently seal off the layout, thus I only slightly varied its background tone, to that of the main content area. I have tried to keep the footer as useful however, offering a navigational aid to auto scroll users back to the top of the page.
Creative Nature was engaged to develop a new brand and corporate website, to upgrade a highly successful joint venture’s online presence.
My role in the project was to lead the creative process, produce a viable brand for the website, and to design and implement the website functionality, along side the DEV team. This included developing some jQuery and AJAX powered functionality.