Interface Research design and interaction

Christian Winkler, Christian Reinartz, Diana Nowacka,Enrico Rukzio. Interactive Phone Call: Synchronous Remote Collaboration and Projected Interactive Surfaces. In Proceedings of ITS 2011 (ACM). 2011.

http://www.mhci.uni-due.de/wp-content/uploads/pdf/Winkler-Interactive_Phone_Call__Synchronous_Remote_Collaboration_and_Projected_Interactive_Surfaces.pdf

Robert Hardy, Enrico Rukzio, Paul Holleis, Matthias Wagner. MultiKit: A User Interface Toolkit for Multi-tag Applications. In Proceedings of MUM 2011 (ACM). 2011. Winner of Best Paper Award. PDF

http://www.mhci.uni-due.de/wp-content/uploads/pdf/Hardy-MultiKit__A_User_Interface_Toolkit_for_Multi-tag_Applications.pdf

HCI

HCI 


Good information on how HCI is different when using desktop computers and mobile applications. How this alters the way we interact and choose differently. This gives you access to 9 different papers whittled down from hundreds on HCI.  


'The papers  cover studies of teenagers in Japan, train travellers in the UK, older users on the phone, a rural community in the US and foreign exchange workers in the Middle East; they cover contexts from work to schools and homes and trading floors; they draw from ethnography and communication studies to mathematical modelling, from information systems and cognitive science to urban studies.'


HCI- http://www.sciencedirect.com.libproxy.abertay.ac.uk/science/article/pii/S1071581908001353#ref_bib10

Icon design

\

There were lots of icons i liked the style of. I was particularly drawn to the more elegant designs as i think they'll be more apt for this project. I would like to combine an elegant, simple look although make it slightly quirky and fun rather than too strict and clean cut looking... I will find a decent balance to achieve this through further research.

Panel Design

The panels don't have to be rigid squares, they can be integrated in many ways throughout the store. I think this image gives you a good idea of how the panels can be incorporated and the amount of flexibility you would have. There could be separate screens to leave comments on clothes (like the circles on the display above). The only problem with having a curved display is that it would affect the mirrors but this gives an idea of how advertising could reach another level. 

Panels sharing capability

Bring 'social media' to the panels? The panels could give the option to leave comments on the items, this would provide customer interaction? They would then be able to communicate with one another in store, which was requested in the brief. 

There could be a comment box on the panel allowing them to input the comment on specific items, using their app profile (as this information would be exchanged when connecting mobile device with panel) as their user name, their app profile will the be synced up to all social media networks they have added and appear on their Facebook, Twitter, etc and also be on the panels in store to let users communicate with one another rather than solely their friends (they might not have any!) (This service could be deactivated via settings if they want to communicate only with friends).

There would obviously be the risk of people leaving offensive comments but in that case it would be monitored the same as any social network site and they would either have their account disabled or blocked for a certain amount of time. If people have to spend the time uploading the app and it is interlaced with all of their social networking sites, they are less likely to do such a thing. 

This would be a good way to get a unbiased opinion of the items in store and also leave you opinions and customers would feel that they are part of something- expanding on store loyalty. 

Icon Design

Susan Kare was the original Icon designer for Mac... this is how she produced the logos.

http://blogs.plos.org/neurotribes/2011/11/22/the-sketchbook-of-susan-kare-the-artist-who-gave-computing-a-human-face/

An idea of the production of her icon designs....

Apple

Note: this is a paintbrush. :) 

And how they progressed 

Human- computer interaction

This is a valuable talk on human computer interaction, giving further explanation and advice on how to compose and execute the design of the app and the reasoning behind it.

http://www.cs.man.ac.uk/~seanb/teaching/COMP10092/COMP10092-HCI.pdf


More informative slides to further understand the process of human interaction.


Human Computer Interaction, Third Edition, Dix Finley, Abowd Beale

The homepage

These slides are from Chapter 19's powerpoint presentation. 

Real foyer: Large screen, camera

See virtual world on screen

Virtual world: Representation of web

See real foyer on virtual screen 

Combine the real and virtual world within store and vice versa?

Inside looking out? 

Perhaps suggest that for gameification you could have a character in an augmented reality to add to the virtual world created through the app and user experience. 

There will be avatars already through the use of the 3D scanning, all that is needed is a virtual shop or area for these avatars to perhaps shop together while in house, they could still experience a group shopping experience with their friends and gather points together, it would be like a game (where people spend money on virtual nothings anyways) where they can buy clothes? The novelty would still be in the store as they could meet up and use the panels which i think is appealing to many people. Although in this day and age, many people are too busy to make the effort to go out and meet their friends and travel, this could be an alternative way to shop with friends through the use of the avatars in a shopping environment. 

Layouts

I think a layout like this, with visuals for the different sections within the store (this seasons trends, shoes, coats, etc.), could be an interesting way to navigate. It would be ideal to give the user the option to navigate in this way or use the simple text approach.. this could be done by editing settings?!

I think that having an interesting, quirky element is important to an app. It doesn't have to be too complex but from the example above, it's different and has a unique layout and automatically sets it apart from the rest of the apps i've used. I like how they've created the navigation to resemble a filing system, it's not a common layout for an app, however, everyone knows how a filing system works, therefore would be able to navigate their way through the app easily. 

www.techradar.com Top 160 best Android apps 2011 Updated: The best free and paid-for Android apps By Paul Douglas

http://www.trustedreviews.com/10-best-android-apps-october-2011_round-up

http://gizmodo.com/5863936/the-new-essential-apps-november-2011

After researching some of the best apps of 2011, i discovered they all had a similar layout. None were too abstract or complex, each had a simple navigation formula and large buttons + icons to assist you through the app. Most of the options were stacked in a list form, so not to confuse the user with too much information, and none were overcomplicated. 

Apps that had many options didn't use any images, they simply arranged their icons to allow you to choose where you would like to go within the app and didn't add anything unnecessary. 

Icons and interaction

An in depth talk from, Jon Hicks, on how and why you should use icons and how to design them. This has given me a better understanding of how they guide people through the process of an application, device or webpage and what look you should aim to give them.

http://dl.dropbox.com/u/23369/talks/Icons%20for%20Interaction.pdf

http://dl.dropbox.com/u/23369/talks/Icon-Design-Principles.pdf

Icons....

Interaction Design

A guide to interaction design has been investigated in the book..

Mobile interaction design By Matt Jones, Gary Marsden

It gives extensive reasoning behind why people design interfaces the way they do today.

Interface Research

Some general advice on building good apps. What users are looking for and what they like/don't like.

www.uxdesign.smashingmagazine.com/

Tips and advice from the Android developers website.

http://developer.android.com/guide/topics/ui/index.html

Interface Design Principles

The Essential Guide to User Interface Design: An Introduction to GUI Design ... By Wilbert O. Galitz

Ambysoft

Examples of some decently designed apps...

www.netmagazine.com

I think an augmented reality could be useful and interesting when designing the navigation for the app. It could bring the store online, which is what was asked for in the brief. It could be a fun way of navigating if designed properly.

www.iphoneness.com

Presentation Visuals

As part of our project we will be using a 3D body scanner that connects with a mobile device. These are some simple instructions to demonstrate the process. 

Topshop Autumn 2011

I think it's important when designing for Topshop that we take into consideration the current trends. Topshop stores are generally divided into separate trend sections and change with the seasons. The one section that stays relatively still is the denim section.
When we are designing for Topshop we will have to ensure that the seasons fashion can be easily implemented into the designs so perhaps have windows where different patterns etc can be placed and have one overall general, impartial but fitting theme for the season?

Type is key throughout many of the Topshop ad campaigns. I think it could be very interesting to focus on typography for the general feel per season and then have snippets for each individual trend section implemented into the design. 

Topshop Trends

Here are two contrasting examples of Topshop advertising. It reinforces that they have a diverse form of advertising and there are no strict rules to conform to when planning the designs, only ensure they are fitting with the current theme/trends and the rest is open for interesting, innovative design. 

Topshop are known for their edgy, unique styles and it is reflected throughout the designs over all of their ranges. Some previous Topshop advertising includes;

This was interesting as it deters away from the original Topshop logo. It was designed to fit with one of their seasonal trends, here it shows shows their quirky sense of style. 

This Topshop poster is more fitting for the Logo. I like the simplicity with random splashes of colour. 

QR Barcodes

One of the main elements in making the shopping experience fun, is the ability to obtain information on products, etc, quickly. We decided to use barcodes as an easy method of retrieving the information using a mobile device. 

As barcodes will now be important to the customer i thought it would be a nice idea to create them into a form of artwork/design as it will be just as important and have to be incorporated onto the clothing labels. 

These are a few barcode designs i liked....

Initial planning/meeting.

After reading the brief, i had plenty of ideas in terms of what direction i thought our work would go in.

NCR

First things first, i had a look through NCR's website to get a better idea of what they do and what type of product they may be hoping to achieve. I found that they are a innovative company, excelling ahead of others in areas such as interactive consumerism. 

SCVNGR

I found a website called SCVNGR, i thought it might be a good way of connecting people within the store and make them interact with one another via daily/weekly challenges. We would be unable to use this as it is the work of a different company and we are not hoping to collaborate with anyone else, however, i thought it might be a good starting point to build upon and get some more ideas. 

Topshop

After a few meetings we have decided to go with Topshop as our brand. We chose Topshop due to the fact that it is one of the leading high street retailers, they have many stores worldwide, they are aimed at young-adults (our age bracket is 20-30) and the brief sounds fitting for the progression of a youthful, on trend retailer like Topshop. 

Brief

 Bricks to Clicks: exploring experiential shopping.

Proposer: NCR CX Labs (consumer experience). The Labs are a multi-disciplinary team combining skills in emerging technologies, software, product design and user interaction.  The Labs role is to identify how new and emerging technologies might change and enhance the consumer experience and create novel ideas which can be discussed and validated with their key customers.


 

Concept: Extending the retail window- from the physical to the digital.

·      Brief Summary - To create a truly engaging in-store retailing experience that would compel consumers to come to the store, increase sales and grow brand loyalty.

o   Using a combination of existing and emerging technologies such as social media, mobile computing, recognition services, location based services and tracking, develop an experience that bridges the divide between retail in the online world and the physical environment which in turn increases the potential window of opportunity for purchases for customers and retailers.

·      Brief Description - The aim of the project is to look at emerging interaction technologies and decide how these might work in combination with each other to create a totally different retail experience extending beyond the physical store. Is it possible to create a gaming environment within a store where the shoppers interact with each other in a fun and exciting way?

o   Shopping is often social as well as acquisitive. Increasingly, social media and technology are augmenting or indeed replacing traditional interactions in much the same way as internet retailing is a very viable alternative to traditional stores. Making a compelling and engaging retail experience that engages the social aspect of shopping through technology while extending the window of opportunity for purchases- conveniently beyond a customer leaving a store is beneficial for both retailer and consumer and conducive to a compelling combined channel strategy.

·      The Vision is that consumers would choose to go to the store for the experience and in so doing have more exposure to the products on sale. Using various technologies they would have the opportunity to engage with friends and relevant online content. Their store experience would be captured and be able to be revisited in a convenient and appropriate manner allowing purchases to be made and brand loyalty to be nurtured in a manner that transposed the experiential side of the physical store with the convenience afforded by digital means.

Purpose:

·      Brief Outline - In today’s digital world why go to a store when you can browse and buy online? Retailers are very conscious that the consumer is now, more than ever, in control. So how can they differentiate their shopping experience to bring more trade through their doors and/or effectively increase brand awareness increasing sales across all their channels? Perhaps more importantly, how can they provide a customer leaving the store without a purchase, with a lasting token of the in-store experience and the ability to conveniently purchase goods perhaps hours or days after their in-store experience?  

·      This project aims to explore whether it is possible to combine attractive attributes of the physical and digital retail experience to create a seam less transition between worlds. As shopping is often a social activity, how could, a lone person, contemplating an opportunistic purchase, yet seeking a second opinion from a friend, present an opportunity to a retailer to evolve a system that essentially allows the in-store experience to be captured, along with the tools necessary to make the purchase and relive the experience at a different moment in time in the digital world?

·      The project should explore the level at which the products, social interaction and ability to make the purchase form part of the experience while exploring the convergence of a retailer’s digital and physical presence. A reasoned argument for the chosen direction should be submitted as part of the deliverables. 

·      The experience could take the form of an eco-system, mobile or online content or any combination. Particular attention should be paid to how a system, while offering the convenience to make a purchase, can draw a customer into the retailer’s world. Creating brand loyalty and a forum for timely, appropriate and reciprocal exchange between customer and retailer.

Audiences:

·      Target demographics  (14 – 20 year olds) or (20- 30 year olds)

·      The experience should appeal to consumers who are well versed in mobile technologies and social networking.

Deliverables Needed:

·      Project Plan with timescale for project

·      You should be able to communicate the design intent of the experience describing what the user would do and how they would interact and what role the technologies play in this? Providing an argument for the type of products the experience you have created might appeal to?

·      Given the complexity and scale of this project a complete working prototype is not required but some aspect of the design intent should be prototyped to show the user experience of that element. 

Influences/Tone/Image:

·      A key driver for this project is to consider the extent to which retailers go to create a brand and experience through all of the channels they have available- with a particular emphasis on the traditional, physical store and their online channel both of which may offer a similar or differentiated experience.

Competition for customer loyalty is fierce as is the desire to create a differentiated experience in an increasingly commoditised marketplace. Online shopping is incredibly convenient, the experience that a customer would get in store is inherently difficult to replicate. If convenience is the main driver for online shopping, then experiential qualities of brand and social interaction must be a sufficient draw for the traditional bricks and mortar store.

Is there a point at which the physical and digital world can come together, producing a mutually beneficial experience and model, where rather than suggesting consumers choose the store OR the website, the two channels are viewed as a simultaneous extension of one another.

·      Needs to be exciting, engaging, and useful and to encourage loyalty through repeat visits and purchases.

·      The outcome should be appropriate to the chosen age group, in terms of relevance, functionality and tone. As a key component of the brief is around the experience, it is recommended that you choose a brand or retailer that has a strong and well defined direction as this will make the effectiveness of the experience and the potential of the outcome all the more powerful.