Archive for the ‘user interface’ Category:
Touchscreens and Hover states
With the huge popularity of mobile touch devices and the current major drive to make everything web related compatible with these devices, today’s Design Reviver Answers discussion is certainly relevant with current development trends. The question that was asked was “Will Touchscreen devices make hover states a thing of the past?”
You can leave your thoughts and point-of-view below, or you can leave your answer on the original question on Answers here: Will Touchscreen devices make hover states a thing of the past?
Will Touchscreen devices make hover states a thing of the past?
This question was originally asked by Mpstud.
The best answer comes from Darrell Estabrook :
Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.
Amazing Pure CSS3 Experiments
The new and revitalized CSS3 properties have not only opened up many, many marvelous development solutions for web designers, it has also allowed talented developers to push the boat out further and showcase there CSS skills by building and styling in ways that were never ever thought possible previously.
In today’s news round-up we take a look at some of these amazing experimental pure CSS3 creations…
Please note, you will need either the latest version of Safari or the Chrome browser to fully experience these CSS3 experiments.
iOS Icons Made in Pure CSS
iPhone CSS3
Pure CSS Twitter Fail Whale
Pure CSS Animated 3D Super Mario Icon
Pure CSS Animated 3D Super Mario Icon
By Paul Andrew (Speckyboyand speckyboy@twitter).
Three Kick-Ass Web Developer Tutorials
Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.
A jQuery, CSS3 & HTML5 Hover-Based Interface
In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
How to easily create charts using jQuery and HTML5
For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5
By Paul Andrew (Speckyboyand speckyboy@twitter).
Smart Tips to Help You Create User Friendly Content
A major problem with many new websites today is that their content is geared toward a different topic from what their site initially started up as. For example, let us say a website starts up geared toward gadgets and technology reviews. For the first few months, you are getting exactly what you came for, technology and gadget reviews.
However, as time progresses the reviews begin to widen to internet technologies such as web development, emailing, and the likes immediately.
As a reader, you will not necessarily be interested in reading about web development or emailing as you visit the site for gadget and technology reviews, thus, you will probably begin searching for a new website to call home for your gadget and technology review source. Going back to being a webmaster, we will touch base on six tips that help you produce content geared towards your audience as well as tips to introducing new content away from the initial category or categories.
Content That Meets Your Audience’s Standards
When creating content for your website, you need to make sure it meets your audience’s standards, such as comprehension level, topics in their interest, and the likes. Let us continue with the gadgetry and technology example mentioned earlier. Let us say you own a gadgetry and technology review website and your audience range from teenagers to young adults interested in the technology world.
So for example, the content on your website should be written in a rather casual style without much sophistication based on the information provided about your audience. The content should as well be fully geared towards useful gadgetry and new technologies that your audience can make use of or fit right in their alley.
Due to your targeted audience being a young group in addition to the category you cover, your content should not generally be composed in a business-like manner but rather casual as mentioned earlier. With that said, by approaching your audience in a different monotone than expected, your audience will lose interest in the content and or website altogether.
Complimenting Your Website
Your content should compliment your website, which means that your content should be relevant to and or supplement the topics you cover. Think of your website as the introduction to, or the summary of, a book. The introduction gives the reader a general idea of what to expect throughout the book.
However, if the introduction does not compliment the contents of the book, it leaves the readers unhappy and rather confused about the entire book. Thus, your content should supplement or compliment your website to assure it is user friendly.
Skimmable Content
Most users never read your content thoroughly or completely but rather skim through it to get to where they may find it interesting and applicable to what they were searching for. Furthermore, by breaking down your content into short and understandable paragraphs or bullets, you make it easier for them to find what they were possibly looking for.
Additional enhancements to making your content skimmable are to highlight keywords that may possibly be in their interest or to create separate titles for several topics throughout. For example, let us say you have an article on the top ten friendly dog breeds.
To make the article easier to skim through, you would highlight the ten dog breeds you mention so users can easily find the breed they want to read more about or you can provide a title to each paragraph you mention each individual breed in.
Bloated Content
Your content should flow off the tongue naturally as if you are addressing the viewer personally. What this means is, your content should not be stuffed with “filler text” or bloat in order to address your message, but rather be direct and to the point to keep the readers interested in the topic rather than leave or skim through it due to useless and unneeded text.
Strengthen Your Argument
Whether you are reviewing a product, talking about methods to saving time, or how to properly mow your lawn, they are considered arguments, whether you have intended them to be or not. Arguments need to be backed up by other sources or facts.
A lot of times arguments are backed up by imagery or referencing facts your viewers may have never heard of which causes your reader to sometimes doubt about the contents authenticity or correctness.
Therefore, you should occasionally link to outside sources to back your argument to have your readers assure that your facts were not whipped up in a few minutes, but are rather backed up by other reputable sources. Not only does this strengthen your contents correctness, it also assures users that they have chosen the right place to read about certain topics.
Consistent Voice
From page to page, article to article, quote to quote, you want to assure your voice is consistent throughout your website and not contradictory. If users are finding out that you and your content are falling into contradictions throughout your website, it builds a mental image in your viewers mind that your website is covering topics its editors do not quite fully understand which leads to making your website an untrustworthy source to many.
In order to avoid contradictory content, go back and check the content you currently have that relates to what you want to publish, this assures that your voice is consistent and strong throughout.
While making your content user friendly may sometimes be a tricky challenge, it should be something that comes natural if the topic your website covers is something you enjoy and or experience. Additionally, users always tend to love to throw feedback whenever they can, whether be it on the topics you offer, topics you do not offer, your website layout, or even the frequency of how many times a week you post content or the length of the content.
Moreover, taking your users’ feedback and applying it is the best solution to making your content user friendly and targeted while showing your users that you care about their feedback and that your website is built around them rather than for them.
The Future of Mobile Development
There was an interesting question posted in the last few week on Answers, discussing a web design topic which is very popular and certainly relevant within the design community. The question was “What Do You Think is the Future of Mobile Development?”. Questions like these deserve to be opened up to a wider readership, so, what do you think?
You can leave your comment below, or you can leave an even better your answer on the original question on Answers: What Do You Think is the Future of Mobile Development?
What Do You Think is the Future of Mobile Development?
This question was originally asked by a Themans, and you will find the best answer below:
The Best Answer came from an Andrew Miller:
The Next Answer came from a Steve Workman:
Unanswered Answers
That is now four weeks without any unanswered questions!!!
Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.
Aloha Editor, CSS3 Pie, FontFonter – Impressive Fresh Tools
It is always impressive how many useful and free web apps and tools there are for web designers, and today’s fresh selection is just that – very impressive. The Aloha Editor is especially impressive, with its unique live editing features. And there is also CSS3 Pie which will make all CSS3 properties viewable in all versions of IE (it really does!). If you have the time we recommend you take a look at these tools.
Aloha Editor – The HTML5 Editor
Aloha Editor allows you to edit content you would never imagine you can. It is the world's first full featured Editor that allows you to edit dynamic content live and in place.
Aloha Editor – The HTML5 Editor
1dl.us – Your all-in-one tool site
1dl.us is a useful all-in-one resource, that feature URL shortening, Upload Pics, Pastebin and a Password utility.
1dl.us – Your all-in-one tool site
CSS3 PIE: CSS3 decorations for IE
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
CSS3 PIE: CSS3 decorations for IE
FontFonter
FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.
FontFonter
By Paul Andrew (Speckyboyand speckyboy@twitter).
Fresh Photoshop Tutorials and Resources
Today we have a nice round-up of hand-picked and fresh articles and resources for all of the Photoshop fans out… that will pretty much everyone then! There are is a huge selection (50!) of tutorials for the latest and greatest CS5, a selection of trending lighting tutorials, 100+ Photoshop actions and finally an impressive selection of web layout templates. Hope you find them useful.
Brilliant Adobe Photoshop CS5 Tutorials From 2010
Brilliant Adobe Photoshop CS5 Tutorials From 2010
40 Dazzling Photoshop Abstract and Lighting Effects Tutorials
40 Dazzling Photoshop Abstract and Lighting Effects Tutorials
40 Professional and Detailed Web Layout PSD Templates
40 Professional and Detailed Web Layout PSD Templates
100 Free Photoshop Actions (And How to Make Your Own)
100 Free Photoshop Actions (And How to Make Your Own)
In Defense Of Photoshop (Good Read)
In Defense Of Photoshop (Good Read)
By Paul Andrew (Speckyboyand speckyboy@twitter).
Free Professional Developer Icon Sets
Nothing gets a web designer more excited than a good high quality and (especially) FREE icon set. And that is exactly what we have for you in today’s design news round-up.
You will find five fresh sets that that are perfect for web and mobile app developers, and all are completely free.
200+ Exclusive Free Icons: “Reflection”
You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are included.
The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.
200+ Exclusive Free Icons: “Reflection”
Free Mobile Berries
This set contains 80 icons, sized at 64×64px and are in .png format.
Free Mobile Berries
Content Management System Icon Set
This CMS Icon Set is made up of 12 high quality icons sized at 48×48px, and available in .png-format. The set was designed to be used in content management systems, but can also be useful for other user interface designs. You can use the set for all of your projects for free and without any restrictions.
Content Management System Icon Set
Designer Icons – Professionally Hand-Crafted Free Icon Set
12 Professionally Hand-Crafted icons for designers and creatives. Each Icon is 32×32px with a transparent background.
Designer Icons – Professionally Hand-Crafted Free Icon Set
Tron Legacy Social Icons
This social media set has been inspired by the classic movie Tron. In total there are 20 icons, and the download package has the PNG, BMP, GIF, ICO and AI versions.
Tron Legacy Social Icons
By Paul Andrew (Speckyboyand speckyboy@twitter).
Awesome Resource: User Interface Design Framework
Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.
License: The framework has been released as a complete web designer kit for free, even for commercial use.
You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:
GUI Library
The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.
Vector Icons Library – 260 Minimal Icons for Free
This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.
Graphic Styles Library
The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.
You can download the UI Design Interface here: User Interface Design Framework
By Paul Andrew (Speckyboyand speckyboy@twitter).
Questions That Help Assess Website Usability
The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one.
When designing with usability in mind you must make sure you test extensively, and consider the fact that what may be easy for you to interact with, may be difficult for others. It is about finding the right balance that will allow a wide variation of users to exit your website satisfied with the user experience.
Why and What to Ask?
We’ve put together several questions (you might not have heard of) that will help you enhance and assess the quality of your websites usability. Not every question may apply to your case, however, these questions are meant to help you to think a bit more from a users perspective.
How Can I Enhance the Usability of My Links?
I was a bit hesitant to start off with this very question, mostly because some believe that links don’t play any part in a websites usability factor. However, from previous testing and links being a definite part of user interaction, we know that we must find ways to make links as clear and concise as possible.
A user must clearly be able to point out a link within a sentence, paragraph, or anywhere else on the site for that matter. Many designers have solved this issue by adding small icons to links through CSS, and adding anchor text. Links that are associated with your websites navigation need to be given even more attention. A sites navigation can make or break the user experience. This is especially true with tweaking your website for maximum accessibility.
What is the Five Second Rule?
When you refer to a websites usability, you’ll sometimes come across the “five second” rule. Even though there may be several versions of the five second rule such as three or two seconds instead of five, the general idea is that a user should be able to digest or have a quick break down of what your website is all about, as well as what you have to offer within the first few seconds of their visit. Anything after that will more than likely result in disinterest and may eventually drive visitors away.
The homepage is key, since it is the first thing users will become acquainted with. What does this have to do with usability? Everything. If your website fails to catch the attention of the targeted user, then there simply will be seldom interest in using your website. The Five Second Test (usability testing tool) goes hand-in-hand with the five second rule.
Are the Titles and Headings Distinctive?
This benefits every site, however, if you run a blog/magazine then this will be one of the most important elements of your websites usability. You should make sure that your titles for sections and posts are easily distinguishable and clear. They must be easy to read, understand, and remember. When you style your headings it’s important that you don’t over-do-it and you take your time in selecting the right type of font. Bad titles and headings can make sure site look convoluted and somewhat distorted.
Is the Content on My Site Displayed in a Consistent Manner?
The information displayed on your website should be structured in such a way that it represents consistency. Content that isn’t structured will make your website look messy and unappealing.
For example, if your blog posts are all aligned to the left, you should make sure that every post is aligned to the left. It wouldn’t make much of any sense to have one post center aligned, the next to the left, and a few to the right. Users will be confused and their eyes will most likely end up hurting after trying to read the mess on your site.
Do Clickable Items Lure Me to Click Them?
Simply said, what’s the point of having an item you want users to click on if it doesn’t even seem clickable? For example, if you have image ads on your website you’d definitely want users to click on them. A simple and straightforward way to do this is to add a property such as a drop shadow to all of your image related ads through your CSS.
CSS-Tricks is a reasonable example of what we’re talking about. Check out the sidebar with the 125×125 ads, see how they interact and the size of the border around them. All of these factors contribute to luring you in to clicking on the ads. In such a way, elements you want users to click on should be undeniably clickable and are expected to contrast the rest of the content one way or another. Make it easy for your users, guide them a bit and you’ll see that they’ll respond much better to anything you “throw” at them.
Is the Entire Site as Functional as It Is Appealing?
What’s the point of having a website that has been aesthetically “perfected” if it isn’t nearly as functional as it looks? Your website should respond well to actions performed by the users. If the site can’t deliver quality functionality, then you’ve more than likely defeated the purpose of usability. True usability is more than just design, it’s function. We’re not inferring that you should place more emphasis on the back-end of your website, however, there should be a balance between the front/back end design. These two will always work together to ultimately create a much better user experience.
Does the Site Load Quickly?
Even though this question is obvious to some, it’s still something that should be included within this article. The speed of which your pages load can drastically contribute to the usability of your website. If your web pages fail to load quickly, then this can put a strain on the time users have to interact with your website. The faster your pages load, the better users are able to interact with your website, resulting in a much more appealing UX.
Remember you can always post your usability related questions on Design Reviver Answers for accurate and informative responses.