rood joshua mobile_presentation2
Post on 09-May-2015
153 Views
Preview:
TRANSCRIPT
MOBILE AND TABLET DESIGN
Joshua RoodFWD 11/24/13
Sunday, November 24, 13
GROWTH OF MOBILE AND TABLET USAGE
2013 surveyed usage
74% of people use a smartphone
52% use a tablet
2014 estimated usage
80% use a smartphone
64% use a tablet
Source: http://www.mediapost.com/publications/article/210981/mobile-becomes-media-platform-74-use-smartphones.html& http://mashable.com/2011/08/05/mobile-design-priority/
Image Source: http://umhsheadlines.org/10/protect-patient-data-secure-your-smartphone-tablet-and-other-mobile-
devicesutm_sourcehshutm_mediumemailutm_campaigntopstory-protect-patient-data-secure-your-smartphone-tablet-and-other-mobile-d/
Sunday, November 24, 13Although many businesses will have a site that will work smoothly for desktop and laptop users their sites may not be user friendly on smartphones and tablets
Many businesses are solely catering to only to computer users and ignoring the growing trends of society’s use of mobile devices.
Unlike desktop and laptop users, who multitask between work, play and casual research, mobile users are focused.
Based on a survey of 2,500 cell or smartphone owners aged 12 to 64 in August, a study by Frank N. Magid Associates estimates 74% of people now use a smartphone and 52% use a tablet.
Frank N. Magid Associates project that 80% of Americans next year will use a smartphone, and 64% a tablet.
MOBILE VS. DESKTOP SITES
Content Prioritization
Navigation
Links
Source: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
http://torsionmobile.com/2012/01/19/desktop-vs-mobile-searches-what-you-need-to-know/
Sunday, November 24, 13
Understanding the differences between desktop and mobile sites is important for all businesses that have a website.
The first complication for the mobile site is content prioritization. Truly, less is more. Users of mobile sites are looking for specific information and need a direct link to their information. It needs to be readily available where the user will not have to search many pages for the information. Whereas on a desktop, the user can search through pages and have a richer user experience while not feeling the affects of the smaller screen.
The next problem is navigation. While on a desktop site the user can navigate horizontally through each menu without feeling the constraints of a smaller screen. Conversely the mobile user will not have a pleasant experience viewing a desktop site on a mobile device. The desktop site is much to elaborate causing greater load times and difficulty of navigation. Typical mobile sites use vertical navigation which are bars that link to the important information.
The next problem is links and how to navigate to them. On a desktop there are typically many hypertext links which are easily navigable with a mouse. Users of mobile devices, with only to options of fingers, find tapping links to be difficult and not user friendly. These links on mobile devices need to be much larger and are usually in the form of bars, tabs, or buttons to allow better precision when tapping.
MOBILE VS. DESKTOP
Text and Graphics
Size and Space
Calling Integration
Source: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
http://www.websearchsocial.com/mobile-vs-desktop-how-much-content/
Sunday, November 24, 13
Desktop websites allow a wide array of graphics, logos, colors, texts, etc. but due to load times and screens size of the mobile device, many of these features are made more simplistic and users will typically not see advertisements on the mobile device.
The next and biggest challenge of all is the size of the screen of a mobile device. Desktop sites have no limitations and are able to offer navigation menus, large footers of quick links, and even progress indicators in a check out situation. Mobile sites do not offer these because of the size of the screen. If these features were added the mobile site would be cumbersome and cluttered.
One of the biggest features that the mobile sites have over the desktop sites is the ability to press a phone number and instantly make a phone call from the website.
SMARTPHONE USERS AND COLLINS CATERING
Users are objective oriented
Move from task to task quickly
Important information
Scheduling
Contact info
Menussource: http://mashable.com/2011/08/05/mobile-design-priority/
http://www.weddingwire.com/biz/collins-catering-events-llc-orlando/4d3a5cd4d0481365.html
Sunday, November 24, 13
Smartphone users are objective oriented and will move on when the task is completed. The users want simple layouts that allow them to complete and move quickly from task to task. When users pull up Collins Catering site, they will likely be searching to find contact information, make a reservation, or take a peak at the menus.
The Collins Catering computer site is set up well for a transition to mobile usage. On the mobile site, for Collins Catering, the user would be able to navigate through the same headings (i.e. home, about, venues, etc.) vertically and find the information quickly. There would be less interactivity, meaning videos and slide shows, which would allow a smooth user experience. The site would be more simplistic for ease of use, but would have all of the necessary content. In the event that the user wanted to see more information, a link to the full website would be available.
TABLET USERS AND COLLINS CATERING
Leisure surfing device
Less is more
Simple but more interactivity
source: http://mashable.com/2011/08/05/mobile-design-priority/
http://www.techdigest.tv/tablet_pc/
Sunday, November 24, 13
Tablet users are looking for more user interactivity. These users want to see rich colors, videos, and buttons to push to optimize the user experience offered from a tablet.
This is where Collins Catering can EXCELL! Collins Catering can offer videos of chefs cooking, slide shows of entrées, videos of venus and events. This would be an excellent place to showcase video testimonials.
The tablet site would have many of the same capabilities of the computer site, but would offer a rich entertaining user experience.
BAD MOBILE SITE EXAMPLE
http://www.scimedsolutions.com/
Source: Screenshots taken from http://www.scimedsolutions.com/ on desktop and mobile device
Sunday, November 24, 13
This is an example of a mobile site that does not work correctly. There is no mobile site. It goes directly to the desktop site. The first picture is a screen shot of the desk top site. The second is what happens on a mobile device and the third is when one zooms in on the mobile device and the pictures are not seen clearly and navigation is difficult.
GOOD MOBILE SITES
https://www.wellsfargo.com/
Source: Screenshots of mobile and desktop versions of www.wellsfargo.com
Sunday, November 24, 13
Wells Fargo has a great and interactive desktop site but offers a very simplistic and easy to navigate mobile site. There are no bells and whistles but on the mobile site but it offers the user a fast and quality experience. Wells Fargo utilizes the vertical navigation method.
GOOD MOBILE SITES
www.orbitz.com
Source: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
Sunday, November 24, 13
Orbitz also has a wonderful interactive desktop site and again the mobile site is a stripped down version that allows for fast navigation.
TOOLS USED FOR MOBILE
XHTML
HTML5
http://www.onbile.com/info/html5-to-create-mobile-websites-2/
Sunday, November 24, 13
Mobile websites today can be made with the aid of XHTML and HTML5. Both of the these markup languages ensure that the user will be able to navigate through mobile sites with ease.
RECOMMENDATIONS FOR COLLINS CATERING
Expert mobile designer
http://www.axtongroup.com/mobile-website-designer.html
Sunday, November 24, 13
To ensure that the mobile site for Collins Catering will continually work properly I recommend that one of these languages be used. Also it is imperative that a person that is experienced with mobile information architecture designs the site so that the site runs smoothly.
top related