Apple Watch Essay inc. Mockups

INTRO

Watches are an indispensable tool in modern day cultures for measuring time. The first clock was invented in Babylon 3.5 thousand years ago. These were a sundial which consisted of a stone dial with a rod set in the middle, the shadow of this rod indicated the time. These clocks accurate and reliable, but they have one major drawback, they can work only in daylight. The Incense clock, a traditional Chinese timekeeping device consisted of an incense stick being burnt. The time taken for the incense stick to burn was known which meant the time could easily be calculated.

The first self winding wristwatch system was invented by John Harwood in 1923, and since has gone from strength to strength. Watches are no longer worn as just a a functional device but as a fashion statement too.

THE MISSING MARKET

Apples sales started to peak with the iPhone 6 with stock prices falling since due to less phones being sold. It needed a new product to please investors. At a time where consumers had peaked in interest about smartwatches, Apple released the watch. The Apple watch, a square format Apple watch, a device that connects to the iPhone via bluetooth to make life a little easier for it’s owner. Glances were meant to be able to give the user all the information they required about their notifications. Fitness was to be tracked to try and benefit the users health, this was done with sensors embedded within the device that was able to track all types of information, heartbeat was just of one them. Not just a tech device, Apple targeted the fashion market too with this product. Three different ranges for the product, sport (£259-299) ready for fitness with sweat resistant materials Watch (£479-949) made from stainless steel and coming with a variety of different style bands to match the watch. Edition (£8,000-£13,500) a luxury model made from 18 Carat gold and different strap materials including leather. What is interesting about this range is that the while the style differs, the product and it’s function are exactly the same, with everything that the most expensive gold watch is capable of being available also on the cheapest sport model.

Apple claims that the reason they made the device rectangular rather than a tradition circle shape was that it wouldn’t be able to display the information without cutting it off at the edges.

What went wrong?

It can be argued that the Apple watch was a failure, Apple refuse to announce sale figures and reports find that the company currently sells as little as 20,000 watches a day, just weeks after it’s release (Mail Online, 2015), compared to the 818,329 iPhones sold every day (Kingsley-Hughes, 2015). So why did it go so wrong? There are no answers currently and this is where I will speculate and give my opinion about what happened with the watch.

I believe that the watch was too complicated and aimed too high too soon. Applications weren’t stored locally on the watch and were loaded from the phone directly meaning that any function of the phone took a while to load. It used a a full colour palette meaning the the systems battery, which was already small, would be drained within a day. Questioning existing users and potential buyers gives the consensus that the ui of of device is not brilliant, the main screen has lots of little icons squeezed together to display the apps (Shown Below), and that there is room for improvement.

image-watch2

Another inventional design Apple has used within the design of their watch is the square format. The reasoning seems almost only to stand out from other smartwatches available on the market, users consider the device to be un-watch like due to the screen being an unconventional shape. Questioning potential buyers, I found more people would be likely to buy the watch if it came in a round form factor. The current ui, while already flawed, is not built for a round watch face and so would require a complete redesign;

Screen Shot 2016-05-20 at 10.10.08.png

What I’d change

Firstly, if I would change to a conventional round form factor, this would attract the majority of the people I questioned regarding the watch. I would scrap the external apps and use the watch for a few simple functions that it could achieve really well. It would be able to aid with fitness, music, contacts, e-mail and social feed, anything more complex requires more than a simple ‘glance’ and should be done on the phone. Pulling the majority of the colour from the ui is important, this mean the device could use the different colours as detail to amplify meaning, green becomes good or accept, orange being a neutral colour, red becomes alerts or warning. The watch would be capable of three simple modes, time mode which displays the time and customised notifications, fitness mode displaying the heartbeat calories being used and speed of which user is running and finally music mode offering simple controls over the song currently playing.

TIME-MODE.png

The above image shows how the watch face really uses a simple single colour palette to amplify its’ design with the red appearing for just the notifications on the device.

MENU.png

This shows how the cut down menu doesn’t need to be difficult and complicated, it’s simple and flat design allows the user it easy and quickly understand the layout and access they desire straight away.

SOCIAL-FEED.pngThe above Image combines the entire social feed, just like Blackberry devices do in an easy to understand way. Checking if you have new messages has never been easier.

This shows how the simplistic design of the watch face makes the information on the screen a little easier to understand rather than being cluttered with too much information the neutral orange has been placed around the edge to help the user to understand the progress they have made.

MUSIC-MODE.png

This image shows music mode, with basic controls over the song choice and volume, it is set up to ensure the user can control their music easier than taking their phone from their pockets.

MUSIC-MODE.png

The above image displays the music selection app, using the alphabet around the exterior of the screen it means the centre can display more, the actual artist. This means there are quick ways to jump to characters within the alphabet or just scroll through artists as you would wish.

MUSIC2.png

This shows how simple it is to pick a song once you have selected an artist, this is important as it doesn’t confuse the user with an over complicate layout, just a simple list will suffice here.

MULTISCREEN.png

Finally, this mockup displays the different screens the user has been through to get to their current screen, this means instead of hitting the back button the can push harder on the device and it would show the user every screen allowing them to choose how far back they would like to go.

While this is a simple concept, I believe Apples’ watch user interface is what let it down, and that it is trying to do too much at once. A simpler device with five main functions that can be handled really well is much better than a device can try and fail to achieve a far greater amount of functions. This would set the foundation for the watch, allow people to see the watch as a true fashion item and allow Apple to build upon it for it’s next generation.

References:

Kingsley-Hughes, A. (2015). Nine iPhones sold every second | ZDNet. [online] ZDNet. Available at: http://www.zdnet.com/article/nine-iphones-sold-every-second/ [Accessed 17 May 2016].

Mail Online. (2015). Apple Watch is a FLOP: Sales have fallen 90% since April, report finds. [online] Available at: http://www.dailymail.co.uk/sciencetech/article-3152514/Apple-Watch-FLOP-Sales-gadget-fallen-90-April-report-claims.html [Accessed 17 May 2016].

Advertisement

Apple Design Influences

How has Apple effected web design over the years, and will continue to do so.

History

Apple has always been big on white space, using it to bring attention to the images and the text, while this  is relatively simple design, it can be seen across many websites with similar design to apple’s website. It uses subtle gradients to add depth to otherwise boring content, great text and content that match, icons used across the site, a grid system to keep everything in line, user friendly navigation and use of javascript to avoid long loading times. This can be seen in Apples website along with a lot of other websites that have been influenced by their design structure.

Apples website:

apple

in comparison to

Mac Rabbit:

macrabbit

Versions:

versions

Pixelmator:

pixelmator

Removing Skeuomorphism

Skeuomorphism is the term given the visual style that represents physical objects. The reason for using the visual style to begin with, was that when people first started using computers, they didn’t fully understand how to use them, so designers made icons to represent the original object. This is why mail icon is a envelope, music icon contains a musical note ect. Now that computers have gone ‘mainstream’ and we all understand them much better, we can remove a lot of this unneeded clutter such as textures, reflections and shadows that allowed things to represent their physical counterparts. This was changing content to so that instead of using texture and realistic imagery to represent certain design aspects, they moved to flatter mimalist design. Here are a few examples from when apple removed skeuomorphism from their mobile operation system;

iOS-7-vs-iOS-6-comparison iOS6vsiOS7_icons

The Icons were all changed to be much simpler, vibrant and nicer to look at, with the removal of physical objects and textures. The same can be said for the design with the apps.

ipod

Examples of flat web design

http://foodpornindex.com Is a website that tracks the hashtags of certain foods, healthy and unhealthy. It then shows it in an info graph designed with flat colours.

foodpornindex

http://www.franzsans.de Is also shows another good use of flat design to show off the design of the font so you buy it, It works particularly well and I was tempted to buy the font.

Franz Sans

Future

I believe that circle user interfaces will be inspired by Apple’s new watch. Circles appear in our natural world, just look at the moon, wheels and fruit. They create emphasis and focus our attention, giving us a defined centre. Apple have recently re-imagined user experience for the smaller screen of the watch but could have potentially created another web trend. Heres a picture of the new operating system.

apple-watch-features-apps

Using circles in web design isn’t really a trend that has taken off over the years but there are still a couple of websites that use them in their design. Not just using circles in the design but in the user interface will create a completely different experience, something that hasn’t been created on rectangular shaped screens. While it doesn’t take up every area of the space, it will allow for a new type of white space by naturally giving the page more room to breath.

The operating system runs on a fluid icon system where you flick the screen to navigate into areas that aren’t currently visible, a crown on the side allows the user zoom in/out to their preference. If you click on an icon, an animation zoom into the icon until it is fullscreen then transforms into the app. This could be the next step in web design, as previously spoken about in my blog, pageless designs are becoming much more popular and seem to be more logical and less crowded than current designs. Interactivity to create a more immersive experience for the user would work well with pageless designs, I have researched websites that currently use circles in their user interface to create an interactive, pageless design.

A particularly interesting website I came across was (http://www.circle-ent.com) complete with animations and flat colours this website screams simplicity. Circle is a “idea lab”, a company that works on web experiences for ‘fun and brands’, it targets its market perfectly by showing off their digital skill with a fun, friendly user interface. This website seems to have already mastered Apple’s technique of simplicity through white space, the use of flat colours.

circle

Another great example of a user experience that uses circles was (http://vlog.it) which uses a lot of slick animation from arriving to the site, to the introduction of the wheel of vlogs. It was “named as finalist for the 15th SXSW Interactive Awards in the Motion Graphics category” and “won the Awwwards Site of the Day”. Not quite as simple as the previous, it still uses flat colours and white space. Shadows from one circle to the next give the wheel a sense of depth, which makes the century circle stand out even more. It is perfect for its audience, people who want to watch video blogs the site which on a single visit contains about 40 links to videos which all open within the same window with an animation, will show recycle a total of 396 videos. It means users don’t have to leave the page, they click on all videos until they have watched them all then just refresh for another set. It takes for a great user experience, takes on great design concepts.

vlog

A website that doesn’t use circles as its user interface, but just adds to the simplicity of the pageless design is this one created for the iPhone game “Hundreds” (http://playhundreds.com). It uses white space really well to give focus to the content of the page, and again uses flat colours. There are clutters of different sized circles together and animations create an experience that attracts the user to pay more attention. As you scroll down the page, you follow a grey circle which is shown above and below other images which creates depth within the page.

hundreds

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://versionsapp.com

http://webdesign.tutsplus.com/articles/how-apple-has-influenced-web-design-over-the-years–webdesign-2553

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://webdesign.tutsplus.com/articles/flat-design-ios-7-skeuomorphism-and-all-that–webdesign-14335

http://www.apple.com

http://versionsapp.com

http://www.pixelmator.com

http://macrabbit.com

http://mashable.com/2013/06/12/ios-7-apps-comparison/

http://wpmedia.business.financialpost.com/2014/09/apple-watch-features-apps.jpg?w=620

http://www.digitalartsonline.co.uk/news/mobile-creativity/see-how-app-designs-have-changed-in-move-from-ios-6-ios-7/

http://gizmodo.com/skeuomorphism-will-never-go-away-and-thats-a-good-thin-1642089313

http://designshack.net/articles/graphics/designing-with-circles-tips-and-advice/

http://i-remember.fr/en

http://www.theprz.com/

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://www.awwwards.com/best-websites/franz-sans-powerful-pleasant-1

http://www.theprz.com/

http://activetheory.net/#!/work/food-porn-index

http://www.franzsans.de/

http://foodpornindex.com/#!/berry

http://wp.iosfans.com/wp-content/uploads/2012/11/Apple-Logo-Banner.jpeg