Well, thanks to big names like Microsoft and Apple, these digits of mine have really begun to come in handy. (Get it? Handy? I?m sorry-I love a good pun.)
So why am I telling you this? Who cares how important these ten little phalanges of mine are? Because it?s not just about me, it?s about everyone. Our hands are very quickly moving from keyboards and mice, to touchscreens. Thanks to Microsoft?s release of Surface, the new touchscreen/keyboard combinations, the need to optimize for touch is more imperative than ever. In fact, on November 5, master designer and developer Josh Clark stated ?every desktop UI should be designed for touch now? in his article New Rule: Every Desktop Design Has To Go Finger-Friendly.
Now, notice that he did not say ?mobile-friendly? or ?tablet-friendly?. Inevitably, these will soon be words of the past. The fact of the matter is, the more accessible these touch-screen devices become, the less control web designers will have over how sites are viewed. So, we need to assume that they are being viewed (and interacted with) on any screen size, in any place, using any device. In this article, I will provide ten tips that will allow you to design a site optimized for touch.
Tip #1: Navigation
One of the most drastic design changes that will need to take place thanks to touchscreens is the navigation. The dependable, widely used top navigation can be difficult to use on touchscreen devices, especially the new hybrid models that click into keyboards. To get around this, many sites are placing the navigation to the right or left, at the bottom, or combining those three options. See below for some examples of alternative navigations.
Evening Edition
Cabinet Guerin
Zhuoshi Xie
Tip #2: Dropdowns
If possible, refrain from using dropdowns in your design. If you must include them on touchscreens, be sure to add a clue that the link does in fact lead to a drop down menu. This can be done easily with a small arrow or menu icon, depending on the rest of the design. Another option is to display the entire menu as a list.
Failing to take your dropdown menus into account will likely frustrate your users. Think of a time that you were viewing a site on a touchscreen device, clicked a link in the main navigation, let?s say ?About Us? only to find that two seconds after clicking it, there was a drop down menu with a list of items like ?Our Company History?, ?Our Staff?, ?We?re Hiring,? etc. You were probably frustrated that you didn?t realize that this option was available. Don?t create extra steps for your users, and more importantly, don?t confuse them or make them angry. Here are a few examples of well-done touch friendly dropdown navigations.
Scott Hanselman?s Blog
ASU Online: Arizona State University
Expositio
Tip #3: Button Size
A major difference between touchscreens and non-touchscreen devices is the absence of a mouse. With a mouse, a user has the ability to point and click an exact space, while oafish fingers cannot. In a study by the MIT Touch Lab, researchers found that the average thumb is equal to about 72 pixels in width, while the average index finger ranges from 42-57 pixels. Take this into account when designing. Your buttons, call to actions, and links should fit within these constraints to accommodate the widest audience possible. Below are examples of how the buttons look at the widths discussed above.
This is most likely a given, but it?s important so it makes this top ten list. Your goal as a designer is to create an effective, user-friendly solution. Because Flash navigation is often difficult to use, it is not a user-friendly option. Basically, even if Flash works on the device it is being viewed on, it is still not good for SEO and often too difficult to use. Opt for a more standard HTML/CSS approach.
Tip #5: Layout, Then Bells and Whistles
More than ever, designers need to take a ?stripped-down? approach to give the user what is most important. A good design doesn?t have to be extravagant. The best solution is often the simplest one. If you are having trouble focusing on what is important, look at your design. Forget about the background images, the color scheme, and your typography choices for a bit and review what is left. Does your simple layout make sense? If you were using it on a tablet, would the most essential links be easy to access? On a mobile device? On a desktop? If the layout cannot stand alone, rethink what you?ve done.
Tip #6: Mobilize
For most, the advantage to using mobile devices is that they can be used, well, anywhere. While an advantage for the user, this can be seen as a major disadvantage to a designer. In a world where a site can be viewed on a phone, a tablet, a desktop, or a tablet-keyboard combo, dimensions are highly inconsistent. You cannot choose how your site will be viewed, the dimensions the site is viewed on, what orientation the user will choose, where it will be used, etc. The best thing you can do is design for all of these possibilities. While I am well aware that this may seem like an impossible task, my suggestion here is to make it easy on yourself and easy on your user. From the very beginning of the project, identify what pages on the site are most important and be sure that these are easily accessible. Design a simple layout around these pages. Luke Wroblewski, author of Mobile First, suggests beginning the design with the mobile site, so you can understand the constraints and expand upon a concise design.
Tip #7: User Testing
As always, user testing is really the only way to find out whether or not your site truly works. Professional services such as usertesting.com or usabilla.com can offer an excellent insight into your users? onsite experience. By investing in usability testing, you can learn what features on your site need improving, and why they don?t seem to work. Although I really don?t accept the excuse ?I can?t afford to do user-testing,? I will play devil?s advocate here and provide you with another option. Add a link on your site where users can provide feedback. Although this is not nearly as consistent as usability testing services, it can help to guide you in the right direction.
Tip #8: Forms
Although it is most likely a good rule of thumb to keep your forms as short as possible, this holds especially true for touchscreen devices. It is highly likely that your user will want to type as little as possible. To extend user-friendliness to touchscreen forms, opt for drop down menus over blank fields. Another way to allow for increased user-friendliness is to use HTML5 input codes for iPhone and Android Devices. While it may seem like a small detail, a site that detects which type of keyboard to use is highly intuitive and makes the form easier to complete. And ultimately, the easier the form is to use, the more likely the user is to complete it. See below for these codes.
<input type="email" /> <input type="number" /> <input type="tel" /> <input type="url" /> Tip #9: Typography
In the past, most web designers began creating their sites by selecting a fixed font size. Thanks to touchscreen devices, this task has become slightly more complicated. While you may be wondering: how important could typography possibly be in designing for touchscreens? Well, I guess that depends, would you like users to be able to read your site? The most important part of typography on a touchscreen device is legibility. And the sizes will vary from user to user for one main reason: distance. Think of how you hold a book or a magazine, how far is it from your face? What about when you are browsing on your laptop? On your iPhone? On your Kindle? On a desktop? You most likely hold each device at a different distance, depending on how you are most comfortable. Designers must take this into account. No one wants to have to zoom in to read your content, and even if they don?t mind doing that- you?ve most likely distracted them from seeing anything else on the page that may be important. Luckily, CSS3 introduced a unit called rem- the root em. Unlike the em unit, however, the rem unit is relative to the html element, not its parent. By using rem units, designers can define a font size on the html element, and then define all other units based on that. The main drawback here is the most common one among web designers: browser support. So, when using the rem unit, be sure to include a fallback for older browsers.
Tip #10: Bookmarking is Fun!
Now that you?ve designed a fantastic, intuitive site that functions well across devices, my advice to you is to create a fun way to bookmark your site on some of the most popular touch devices. Simply create unique icons in the sizes listed below, name them accordingly, and add them to your root directory. Then add the following code to your site.
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <!-- For first- and second-generation iPad: --> <!-- For iPhone with high-resolution Retina display: --> <!-- For third-generation iPad with high-resolution Retina display: --> Conclusion
The web design industry is experiencing an extraordinary shift right now. We, as designers, must rethink how we do things. It will definitely be a challenge, but for me, it is welcomed. After all, if we could do the same things over and over again, and have them work all the time, how boring would that be? If what I am talking about here seems overwhelming or you just need help due to your own time constraints, contact us today!? We can help!
Felix Baumgartner Little Nemo gawker earthquake today earthquake today Romney ray lewis
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.