I love Apple! – Differences in UI on OS X & IOS

Apple – the dominating leader in technology which design, develops, and sell consumer-electronic, computer software, online services and personal computers.

Despite the revolution and the fast changing pace in technology, Apple has been consistently designing and developing new products that never fails to appeal to the public. They not only produce hardware such as MacBook, iPads, & iPhones, but also software such as OS X & IOS, which provides apple devices with the optimized integrated environment.

In this write-up, i will elaborate on the difference in User interface between desktop and mobile devices, and providing a case study on Mail application to further elaborate on the differences.

Difference between desktop & Mobile devices

There are a handful of difference in desktop & Mobiles devices. However, in this write-up, only the more critical difference will be listed.

1) Smaller Screen

An average desktop screen size is around 19-23 inches and laptop is around 14-17 inches. Comparing to a phone which is typically around 5 inches and iPad which is around 9 inches. With the difference in screen size, it means that lesser information can be shown at one. Hence, the layout and design of the application must be different.

2) Touch Screen & keyboard

There is a distinct difference in how human interact with desktop and mobile device. There is a luxury of precision in desktop as it is being communicated by keyboard and mouse. However, in mobile phone, users communicate with it using touch features and gestures. There is no more luxury of precision and and hover events. Hence, the application has to be redesigned to suit mobile application.

Difficulties & Challenges

Difficulties that Apple faced is that there are too much information and features that are important for users when using the application. This is absolutely alright in desktop as there is a huge screen, keyboard and mouse for users to interact with it. The problem arise when it comes to mobile devices where the screen can only be that ‘big’ and the it uses touch screen interaction.

So the question is: what should be included in the IOS version and what should be omitted? Apple has chosen those core features to be included and those additional features to be excluded from the IOS version. Furthermore, studies has been done to design it in a way that details can be easily seen in the small screen and users can easily navigate throughout the application. Controls and buttons are also designed in a simple and accessible way so that users can use the application easily.

Case Study : Mail

Email is one of the essential tool for users. Apple has created Mail application in OS X in a comprehensive and powerful application that allows users to create, receive, prioritize, and store email, track action item and events, and create notes and invitation.

When it comes to designing Mail application in IOS, inevitably some of the features and functions have to be omitted. Apple focuses on the core functionality of Mail on the desktop, helping people to receive, create, send, and organize their messages. Mail on iPhone delivers this condensed functionality in a UI tailored for mobile experience that includes:

  • A streamlined appearance that puts people’s content front and center

  • Different views designed to facilitate different tasks

  • An intuitive information structure that scales effortlessly

  • Powerful editing and organizing tools that are available when they’re needed

  • Subtle but expressive animation that communicates actions and provides feedback

Mail on iPhone isn’t a better application than Mail on Desktop; rather, its Mail redesigned and customized for mobile users to provide them with the most user-friendly and convenient interaction between them and their mobile phone.

Apple took the following steps to ensure that users have the best Mail experience in mobile:

  • Distinct, highly focused screens. Each screen displays one aspect of the Mail experience: account list, mailbox list, message list, message view, and composition view. Within a screen, people scroll to see the entire contents.

  • Easy, predictable navigation. Making one tap per screen, people drill down from the general (the list of accounts) to the specific (a message). Each screen displays a title that shows people where they are, and a back button that makes it easy for them to retrace their steps.
  • Simple, tappable controls, available when needed. Because composing a message and checking for new email are primary actions people might want to take in any context, Mail on iPhone makes them accessible in multiple screens. When people are viewing a message, functions such as reply, move, and trash are available because they act upon a message.
  • Different types of feedback for different tasks. When people delete a message, it animates into the trash icon. When people send a message, they can see its progress; when the send finishes, they can hear a distinctive sound. By looking at the subtle text in the message list toolbar, people can see at a glance when their mailbox was last updated.

In a nutshell, UI design between desktop & mobile has to differ. Desktop version has the luxury to me more concise and complete while mobile version has to be compact and straightforward. Inevitably , studies has to be conducted to understand what and how the behavior of humans are toward interacting with such gadgets. Then, a layout that suits the users can be designed.

References

http://en.wikipedia.org/wiki/Apple_Inc.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/DesktopToiOS.html#//apple_ref/doc/uid/TP40006556-CH51-SW1

http://www.paradoxlabs.com/mobile-vs-desktop-10-key-differences

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s