Project manager, UX designer, UI designer and iBook Author.

We were given the brief to create an ibook that would be targetted at a 5-7 year old boy or girl and would be around how to look after your pet. We chose a Monkey and through alot of collaboration and team work we were able to create an ibook. Screenshots will be added soon.

The term web of devices is also known as the internet of things (IoT), consisting of a large number of devices all connected to the internet. As more and more devices come on the market with internet capabilities, we move more and more to a state where all these devices will be able to communicate with each other over the internet. Current examples of these new devices include smart thermostat systems and washer/dryers that utilize Wi-Fi for remote monitoring. Car’s now have internet capabilities. Health monitoring devices can range from blood pressure and heart rate monitors to advanced devices capable of monitoring specialized implants, such as pacemakers or advanced hearing aids.

Also big business are starting to use the information from these data-generating devices for marketing purposes. All these interconnected devices drive big data, which can then be analysed and drilled down to target a person in a specific mind set with advertising.  For example, if you are wearing a wearable fitness device that connects to the internet they can see when you go running or that you are into running then they can target you with advertisements in running clothes.

Kevin Ashton, cofounder and executive director of the Auto-ID Center at MIT, first mentioned the Internet of Things in a presentation he made to Procter & Gamble. Here’s how Ashton explains the potential of the Internet of Things:

“Today computers — and, therefore, the Internet — are almost wholly dependent on human beings for information. Nearly all of the roughly 50 petabytes (a petabyte is 1,024 terabytes) of data available on the Internet were first captured and created by human beings by typing, pressing a record button, taking a digital picture or scanning a bar code. 

The problem is, people have limited time, attention and accuracy — all of which means they are not very good at capturing data about things in the real world. If we had computers that knew everything there was to know about things — using data they gathered without any help from us — we would be able to track and count everything and greatly reduce waste, loss and cost. We would know when things needed replacing, repairing or recalling and whether they were fresh or past their best.”

Mobile Web

With the surge of powerful mobile devices in the past few years, the role of the Web as a platform for content, applications and services on these devices is increasingly important. Groups like W3C’s have come together to ensure that the Web be available on as many kinds of devices as possible.

New mobile Web applications are built upon the technical progress in the Open Web Platform by incorporating HTML5, CSS3, and numerous JavaScript APIs. Sites like Facebook, Twitter, YouTube, Google, are fast becoming the most frequently used sites on the internet, and the most profitable business in the world.

“YouTube revenue was an estimated $10,000 a minute in 2013.”

W3C have also put in place the Mobile Web Best Practices and the Mobile Web Application Best Practices to offer guidance to developers on how to create content and applications that work well across different mobile devices.

Along with that W3C is also exploring ways to use the Web on mobile devices to bridge the digital divide. Digital divide is a term that refers to the gap between demographics and regions that have access to modern information and communications technology, and those that don’t or have restricted access. This technology can include the telephone, television, personal computers and the Internet.

Voice Browsing

Mobile voice is forthcoming technology that implements two technology advancements from recent years: mobile and voice recognition. The combined use of the two new capabilities results in users being able to talk to their mobile devices, the device then internalises, digests and analyses what the user has said, essentially the device understands what has been said by the words used. This feature reduces the amount of physical interaction, such as touching the device, users need to perform to accomplish tasks.

Launched in 2011 by Apple, the Siri, voice-enable virtual assistant brought mobile voice technology to a new level. While the technology existed for a few years before Siri, it was not until the application was launched that the average consumer:

• learned the technology existed
• had the opportunity to access and utilize the technology personally.

A potential future product for end-users is to provide a multi-modal experience where users can speak when/if they choose to do so, and then use touch when/if they choose to do that. The combination of voice and touch will create a personalised customer experience that allows the end-user to interact with the mobile app in the manner they are most comfortable. Furthermore using voice biometrics capability, companies can add security to their mobile apps in a manner less cumbersome for users then requiring them to remember and always enter a password.

Device Independance & Content Adaptation

“This concept encompasses the fact that all devices come in many shapes, capabilities and sizes which define constraints on the content these devices can handle.”

Device Independence basically means having a single web that can be accessed from any internet capable device.

Content Adaptation is a process based on the limitations of the displaying device, adapts the content in such a way that it can be displayed on the device. An example would be different mobile devices having different resolution displays.

Techniques used to alter the content can be done at various stages and in various ways, for example:

• Style – The visual appearance of text (e.g. fonts and colour) and minor layout features such as text justification and indentation.
• Layout – The layout of elements of the content.
• Content – The content itself can be changed.
• Structure – The relationship between parts of the content and other parts of the content.
• Navigation – The way the user goes from content to other related content with minimum effort.
• Application Interaction – How the user interacts with the application.

Multimodal Access

“Extending the Web to allow multiple modes of interaction: GUI, Speech, Vision, Pen, Gestures, Haptic interfaces, …..Anyone, Anywhere, Any device, Any time: Accessible through the user’s preferred modes of interaction with services that adapt to the device, user and environmental conditions”

So basically multimodal access means the different ways users interact with devices. The methods of which are rapidly increasing such as through voice, touch and gestures on devices such as TV’s, cars, home appliances etc. This presents increasing challenges to developers. The W3C multimodal architecture and its components (EMMA, InkML) allow developers to customise applications to allow new methods of interaction. Some of these methods are based on the W3C standards but others depend on their own platforms and technologies. So Multimodal Access is the idea of creating a standardised way that devices and applications communicate with and connect to the internet.

Examples of these are:

• Multimodal Voice Search integrating GUI and speech
• Voice control on mobile devices
• Address input on GPS systems
• Multimodal in-car systems for accessing navigation and audio/visual control

W3C are actively reviewing this and coming up with ways of making a “One Web”  as they call it – “which lets any person to access specific information using any modalities on any devices from anywhere at any time.“

Web and TV

“Learn the lesson that the music industry didn’t learn” — Kevin Spacey

The TV was once a place where the only interaction with it would be to switch over the channel. With the advent of internet TV which is progressing at a rapid pace, watching TV is becoming more of an immersive experience. People can now interact with rich applications which are sometimes based on web technologies.

• Low cost web enabled dongles can now turn a TV into a smart TV

Devices such as AppleTV, Chromecast and 4IFE Smart Stick can turn any standard TV into a Smart TV, all it needs is a USB slot. Once a TV is a smart TV applications such as Netflix, Kodi (Xbox) can be used to stream video to the TV.

• Video Bandwidth Consumption

Video now accounts for over half of internet traffic, Americans consume more digital content than TV content.

• Interactive

How we watch TV is also changing, 77% of people now watch TV while using a secondary device such as a smartphone, tablet or laptop. For example people, might be watching a program while following a twitter feed on the program.

• On Demand content

The direct release to Netflix of House of Cards was a game changer in terms of how TV broadcasting is changing, making the TV networks more aware of how people want to watch TV programs these days i.e when they want it and in the form they want it.

• Diverse technologies

IPTV subscribers are increasing while cable-like TV providers are facing an increasingly challenging environment.

 Conclusions

It’s important not to underestimate the potential of the web of devices, what it is today is not how it will be in the future. Just as the internet itself was underestimated in its infancy and with all the challenges and setbacks it faced. The Web of Devices faces similar challenges today. If tech firms can overcome these challenges while working together to create a standardised One Web for all devices, as discussed earlier. Then the Web of Devices could possibly have a greater impact on our everyday lives then the internet has up until now. One of the critical challenges to overcome will be the adoption of IPv6.

Today devices are identifiable by their IP addresses, which use the IPv4 standard. This standard can hold 4.3 billion unique addresses, sounds like a huge number but this won’t be enough. IPv6 holds many more addresses than IPv4 . Both standards are not interoperable at the moment.

As all these devices can store information without human interaction then this will drive “Big Data” to an even bigger level with the amount of information being captured and stored. This data will be very accurate and big business can data-mine this information for marketing purposes. For example, they’ll know how often you wash your clothes, what type of clothes you’re washing etc. The full implications of the Internet of Things is yet to be perceived. One thing is clear that it is changing how humans interact with each other and the devices they create.

A very interesting talk on this subject can be found at this link:

Ted Talk – The Internet of Things

Video used on the presentation: https://www.youtube.com/watch?v=uEsKZGOxNKw

So when the animation starts I have the title tab zoom in, once it’s fully zoomed in, it becomes a button which when clicked zooms back out into place. Most of the tabs follow this but only the first two tabs displayed are buttons. I did the second tab this way so you could read the information and when you were ready, click it and it would go to it’s place. The third tab out is represents my design skills. The bars are flash movies which expand out as soon as the tab is fully displayed.

The fourth tab out is my adobe software skills. The adobe circle is a button that once clicked plays a movie, where the cirlces expand out, then the colours representing my skill level move into place. This was the hardest to complete the first two colour circular bars don’t appear as I would like exactly but it still works well none the less. This was all done using masks and movies clips inside movie clips. This took as long as the rest of the animation put together.

After this comes my references tab. The text gets displayed one letter at a time, like it is being typed out. I did this by putting the text in a textbox on a tab. I then selected the Break apart button. This puts each letter on a new layer. I then organised each layer so that the movie would play and each letter would be displayed.

Lastly the contacts tab appears, and the text and icons appear independently.

As well as learning a great deal about the Human Microbiome, which I knew very little about at the start of this project, I’ve learned to create a working website from a concept, right through design, development and onto the testing stage. Not only have I learned to create a website but I’ve learned how to incorporate media on a website such as video and flash movies. My design skills are considerably better now, as I now understand the various concepts involved.

Design

The importance of good planning at the start is now very obvious to me as I had to radically change my designs at the end of the design stage.

From the research I did on UX design, I found that it helped me a lot with the design of the site. My initial design was all over the place when it came to UX design. I’ve used a lot of what I’ve learned from the use of colour, to what the use of texture can add to a site, to how important consistent use of shapes is to give a site harmony and unity, to how to give a site good form so everything looks like it should be where it is, to finally how to space everything out allowing the users eye to rest and take in a piece of information. One of my regrets in the design of the site is that I didn’t use textures to give the site more depth.

If I was to start this again at this stage I would incorporate more animations created through Javascript libraries such as EaselJS and GSAP. As my website could be more dynamic and be more of a joy to use as it’s still a bit more static than I would like it to be, but overall I’m delighted with the way it has turned out and feel all the hard work has paid off.

Technical

From a technical point of view. I’ve learned a great deal on PHP coding and CodeIgniter. As well as taking the knowledge I learned in the Advanced Programming module of the course, I watched the Lynda.com video Up and Running with PHP CodeIgniter. This and advice from supervisors and peers has enabled me to get what I wanted working, i.e. the login a user, register a new user and the questionnaire. Also learned how to use creative Javascript libraries such as Wow.js, EaselJS and GreenSock GSAP. At the start of this project I knew very little about Flash, but using some of the knowledge I picked up from the Interactive Multimedia module of the course and some research I carried out on Flash tutorials. I was able to create two flash movies and include them on my site.

Future development

The questionnaire could be improved so that when the end of the questionnaire is reached the user is presented with the questions again but this time with the top answers highlighted. This is something I didn’t have time to add in.

Further sections could potentially be added to this website. For example, information and illustrations on the importance of physical exercise, outdoor activity, rest and relaxation and emotional and mental wellbeing on the human microbiome would further enhance this website. This animated interactive infographic website could also be developed further by including a forum where users could create a community of like-minded people who are eager to learn more about the human microbiome and how to nurture it. Recipe tips could be shared, latest developments or research could be discussed. Also a video game could be created which could further educate users on how to nurture their human microbiome.

The site could also be made responsive as most websites are accessed through mobile devices these days, so this would be important for its future development.

This project was chosen from the RSA Student Design Awards brief Human by Nature.

Brief was to “Design a means of encouraging people to take care of their own human microbiome (the community of beneficial microbes that live inside our bodies).”

So how did I go about this?

-I was very interested in creating an infographic website. I’ve come across a lot of them and thought they were very cool and interesting. So I wanted to learn how they are made. This brief seemed to be the most suited to that as I found a lot of text based information and research, but very little in the way of graphical representations of it. I only found one decent infographic on the subject in all my research. Also I thought the best way of encouraging people to look after it would be to make them aware of their microbiomes, what it is and what it does through using video, animations and graphs.

-The site would also include a

-Quiz – where people could test their knowledge of the human microbiome

-There is scope for a forum to be added where users could create a community of like-minded people who are eager to learn more about the human microbiome and how to nurture it. Recipe tips could be shared, latest developments or research could be discussed.

-Also a video game could be created which could further educate users on how to nurture their human microbiome.

The site looks to illustrate and highlight in a concise and creative manner what the human microbiome is and presents also an overview of the importance of the impact of diet on the human microbiome. The information is presented using a vertical scrolling website with various animated infographics presented using illustrations, flash animations and video. Ending with a questionnaire whereby upon answering a series of pre-determined questions, users are given feedback suggesting how they may further nurture their own microbiome. Before taking the questionnaire users are requested to login. The reason they are asked to login is to get access to a questionnaire, a forum and a game (I didn’t have time to add in a forum or game but the site can be expanded to include both). If the user is a new user then they have the option of registering as a new user. Once the user is finished answering the questionnaire they are presented with a paragraph of information on how best to nurture their microbiomes going forward.

What is the human microbiome

As humans our bodies consist of communities of human cells and micro-organisms called microbes, that work together to fight the affects of bad bacteria to keep us healthy. There are trillions of these micro-organisms in our bodies, most of which reside in the gut.

Our body weight on average is made up of 2.5 – 3lbs of bacteria alone.

The microbiome is an emerging field that has been linked to many diseases and conditions affecting each and everyone of us from metabolism to neurological diseases!

http: / /medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

Site URL: https://daveymorris.wordpress.com/

We created graphical representations of our CV’s for the Interactive Multimedia subject. This was created using Adobe Photoshop and Illustrator. Also in the subject we animated these CV’s in Adobe Flash Pro CC.