Reece's Website

A website to showcase a collection of my work, including recent research projects, interactive prototypes, sketches, UML, wireframes, styles and other experimental concepts.

Introduction

Many of the issues that influence User Experience (UX) projects are studied in the discipline of Human Computer Interaction (HCI). The underlying principle of HCI is '... the study of interaction between people and computers’ (Dix 2004, p.5).

Computer systems exist within the context of real-world human activity. The term ‘application’ or ‘app’ is used to describe the use to which computers are put. The extent to which the application fits within this context of human activity can have a profound effect on its success. The application needs to satisfy cultural requirements in addition to technical, business and legal ones.

Research

My current research project involves utilizing mobile technology, primarily mobile phones, to improve maternal health outcomes for Indigenous Australian woman and newborn infants. It is currently at the proposal stage. Preliminary prototype ideas are included in the prototype section below.

'Capturing cultural requirements in the design of a website for an Aboriginal community' is a Ph.D research thesis completed in 2012. It studies cultural requirements, using an ethnographic design methodology, to develop a web interface for an Indigenous Australian community. The thesis includes numerous screenshots of the final design and can be used as a starting point for any Australian Indigenous interface project.

Peer reviewed papers:

1. 'Evaluating Indigenous Design Features Using Cultural Dimensions', the Australian Computer Society, 2012.
2. 'Focusing on Cultural Design Features for an Indigenous Website', the Australasian Conference on Information Systems, 2011.
3. 'Identifying cultural design requirements for an Australian indigenous website', the Eleventh Australasian Conference on User Interface, 2010.

Prototypes

Disclaimer: The software examples below are experimental in nature, and therefore you should not expect them to look or act in a finished manner. The technology itself may or may not be in a finished state. As such, seeing and interacting with this software is no guarantee that the product or functionality will ever be released, or if it is, may look different to its current form.

Mobile App Prototypes

Mobile SMS Health Messages App: The design of this system is currently in progress and subject to further modification. An initial paper sketch, wireframe and responsive web prototype are available. These concepts will be used to develop an operational SMS subscribe/unsubscribe system, to be implemented within the NSW Department of Health.

prototype sketch wireframe

mesij mobile interface mesij desktop interface

The Book App: This book is a HTML5, CSS3 and JavaScript prototype developed with Sencha Touch. It has been developed primarily for the iPad, however, it should also work on all desktops. It has not been tested on phones, non-iOS tablets or retina displays so it needs further development before release, like most prototypes.

This books purpose is to be readable and easy to navigate. The color platelet was chosen to keep a clean, professional appearance. The total size of the app is 10.6 MB.

sencha touch app

Web Interface Prototypes

Responsive Web Design: This website (reecegeorge.com) is an example of responsive design. askreece.com is a responsive blog built using Wordpress and Twitter Bootstrap. My resume' page is a experimental one-page responsive design using Google maps.

resume mobile resume tablet resume desktop

HTML, CSS & JavaScript: The pazspace.com website was completed two years ago. It is a fully working website that started as a one page prototype experiment. Here are some elegant type face for website designs that utilize fonts from Google's free fonts directory and CSS. Here are examples of how to use gmaps.js to produce Google maps without extensive documentation or large amounts of code. Here is a collection of CSS buttons using minimal markup.

pazspace font examples map examples button examples

Indigenous Australian web concepts: The first example is a one-page web prototype targeting Indigenous Australians. This interface and the mobile site was inspired while working with the Wollotuka community. All dotwork has been done by hand using Adobe Illustrator. Another prototype inspired by Indigenous Australian culture is the virtual tour interface of Uluru. The radiatewarmth.com site is a 'parked domain' concept. Graphics for this site were hand-painted on an iPad.

aboriginal desktop interface aboriginal mobile interface aboriginal virtual tour radiatewarmth.com

Games: When researching the Wollotuka project, it emerged that participants wanted to portray a fun image on the web. In general, the sense of informality and fun associated with the Wollotuka community were considered more important than the reinforcement of serious reputation. For this reason, two games were developed; the rooshoot game and the memory match game.

aboriginal game one aboriginal game two

Methodology

In general, the process I adopt is a modified usability approach, that involves users in an iterative design process. Users are required to test the design for its appropriateness and suggest possible design solutions. User feedback is used to make key decisions in each design. Involving users in the process as much as possible aids significantly in satisfying the UX design requirements.

end user involvement

While each project is unique, the design process is generally divided into three phases.

Phase 1. The initial phase is intended to gain an understanding of both the target audience and more general cultural design issues and to collect the initial expectations of the target user.  These requirements are used in the next phase to develop general themes for the application.

Phase 2. The second, iterative phase is where the main design work takes place. An iterative prototype incorporating the key design features is developed for use as a prop in one-on-one interviews with participants. The feedback from these interviews informs further design work until completion.

Phase 3. Deployment includes the effective transition of the application to the client. It includes the communication of rationale, requirements, intent and details of the design to appropriate stakeholders and staff.

design process

It is essential for the UX professional to understand user perspectives, using focus groups and/or one-on-one interviews. Regardless of the time consuming nature of this approach, there does not appear to be any substitute for time spent in front of a computer screen, gathering user’s thoughts on an evolving interface solution.

References

Arnowitz, J, Arent, M, & Berger, N 2007, Effective Prototyping for Software Makers, Elsevier, San Francisco.

Dix, A, Finlay, J, Abowd, G & Beale, R 2004, Human-Computer Interaction, Prentice Hall, England.

Back to top

Newsworthy

The news section is to provide practical resources in the User Experience field. Links do not open in a new window so bookmarking this page may be helpful if you intend on returning.

An overview on the State of the Internet

Cant explain why fartscroll.js is mildly addictive :).

A Google doc comparing the features of boilerplate patterns.

Audio Player: Responsive and touch-friendly

A directory of fonts, free for commercial use.

An open-source responsive lightbox plugin focused on web performance for mobile devices: Magnific Popup

Usability checklist (beta).

Coffitivity uses sound to enhance creativity. The concept is research based with clear benefits. I have tried it, it does seem to work. Great website.

How to prevent preformance issues with custom fonts.

Responsive navigation examples: Youtube effect, retina friendly and multi level.

Regardless of whether you agree or disagree with the content of intothearctic.gp, from a UX perspective, this site is exceptional. When the high-impact video concludes, users are given further options to 'follow the North Pole expedition', exploring geographical features using maps and multimedia.

Flat UI colors and webcolourdata.com

How Facebook Did UX Testing For Facebook Home (With Fewer Than 60 People)

Alternatives to plain maps: Hack Your Maps

Too many IT managers just dont understand what websites are for, read 'A Matter of Character: Knowing your users and their stories'.

The definitive guide for speeding up websites: browserdiet.com

Chart.js and Chartkick helps create clear web graphs.

typeahead.js a fast and fully-featured autocomplete library.

Freepik is a search engine that helps find free photos, illustrations, PSD and vector.

While using real content is recommended, BLOKK is a font for quick mock-ups and wireframing.

SVG.js is a lightweight library for manipulating and animating SVG.

Lazy Line Painter is a SVG path animator. Useful for holding users attention, documentation is a little lean.

SubtlePatterns.com is a bookmarklet that previews different patterns directly onto the background of any website, allowing you to choose the most appropriate background for your needs. 

Accessing users location 'Using the HTML5 Geolocation API'

For an introduction to conceptual models, see 'Conceptual models in-a-nutshell'

'Understand the Favicon' is a detailed article on options available in favicon design.

Smush.it will analyse the images on a webpage and report how much the size of these files can be reduced, without changing their visual appearance or quality.

'Flat Interface Deign' is a new trend made popular by the latest Microsoft products. Layervault provide their interpretation of 'The Flat Design Era'.

An excellent four-minute video demonstrating how HTML5 features and performance are now equal (or better) than native iOS and Android apps.

An informative article providing insight into current issues facing mobile web/app. developers, '5 Key Concepts For Mobile Web Design To Look Out For In 2013'.

Speed up the download time of your websites with advice from this article 'Front-end performance for web designers and front-end developers'.

Collections of useful interface components for website development: open source css resources, interface design components.

Individual interface design components: CSS responsive menu, iLightBox, Socialtograms icons,

'Think Again: Assumptions About Mobile To Reconsider' is a short article highlighting the need to understand the target user before developing mobile interfaces.

The jQuery team have launched a new jQuery Plugin Repository

Analytics.js is a simple, clean wrapper for web analytics services.

Progressive jpegs: a new best practice.

The Bootstrap front-end framework is recommended for responsive website development, Sencha Touch for cross-platform mobile app development. Alternatives include Ink, jQuery Mobile, Gumby & Workless.

'UX is Not UI' is an article clearly explaining what UI is, and the difference between UX and UI. 'Who Owns Your UX Philosophy?' explains how the UX responsibilities fit into a developing environment and how it effects the end product. 'The Psychologist’s View of UX Design' explains how human nature is at the core of the user experience.

Stencils to help develop websites and applications with pencils and paper from uistencils.com

For inspiration in mobile or web user interfaces design see: pttrns.com, lovelyui.com and uiparade.com. For trends in responsive web design see mediaqueri.es.

Back to top