A Good User Interface
has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running idea list,
has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running idea list,
User Interface Design Basics
User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.
Choosing Interface Elements
Users have become familiar with interface elements acting in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction.
Interface elements include but are not limited to:
- Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
- Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
There are times when multiple elements might be appropriate for displaying content. When this happens, it’s important to consider the trade-offs. For example, sometimes elements that can help save you space, put more of a burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be.
Best Practices for Designing an Interface
Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies. Once you know about your user, make sure to consider the following when designing your interface:
- Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
- Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.
- Be purposeful in page layout. Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
- Strategically use color and texture. You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage.
- Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
- Make sure that the system communicates what’s happening. Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user.
- Think about the defaults. By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user. This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out.
References
- Jesse James Garrett’s The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition).
- Peter Morville and Louis Rosenfeld’s Information Architecture for the World Wide Web: Designing Large-Scale Web Sites.
- 10 Interface Design Fundamentals
- Effective Visual Communication for Graphical User Interfaces
- Using Light, Color, and Contrast Effectively in UI Design
Source http://www.usability.gov/what-and-why/user-interface-design.html
==================================================================
Sample Free Templates
http://designscrazed.net/the-best-html-photography-website-templates/http://designscrazed.net/the-best-html-photography-website-templates/
http://thedesignpixel.com/useful-html5-css3-dropdown-menu-for-free-download.html
http://w3layouts.com/free-responsive-html5-css3-website-templates/
==================================================================
Sample Free Templates
http://designscrazed.net/the-best-html-photography-website-templates/http://designscrazed.net/the-best-html-photography-website-templates/
http://thedesignpixel.com/useful-html5-css3-dropdown-menu-for-free-download.html
http://w3layouts.com/free-responsive-html5-css3-website-templates/
===================================================================
Best Practices for 6 Common User Interface Elements
The appearance and usability of certain interface elements and functionality are crucial to the success any websites in today’s market.
Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.
In certain niches and industries, having UI elements that are not obvious in their use may be perfectly acceptable. The blogging and web development industry are perfect examples.
But when we design user interfaces for non-tech-savvy audiences—which is usually the case with client work—we have to ensure that certain UI elements do not stray too far from what users are accustomed to.
This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple.
1. Appearance of the Search Box
On large information-rich or product-heavy websites, search is king. Users here generally forgo conventional navigation bars in favor of the search box.
A search box that is not immediately visible will have one of two effects: 1) the user will assume no search functionality is available, or 2) the user will find the search functionality after a delayed, and possibly irritating, period.
Ensure that the search box on your website is easy to see. Dark backgrounds and fancy graphics will impair usability, so keeping it white or light gray is best. Also, make sure the search box is large enough relative to other important elements on the page, thus maintaining its position in the visual hierarchy.
The search box on fits the visual theme of the website nicely, being orange and graphically consistent with its surroundings. But if a search box on a busier website were given this treatment, it would probably be difficult to spot.
The design is not a hindrance on Domain by IP because the website has one function: search, which is right in the middle of the page. Plus, being in a technology niche, its developers have less of an incentive to stick with convention. But this degree of creativity should be avoided on larger websites, whose target audiences may not be as technically savvy.
, meanwhile, keeps its search box white, conveniently sized and easy to find on the page:
Despite being in a foreign language, Adventure Time has a very clear search box, even for English-speaking users. The size and color of the box is complemented by the magnifying glass graphic, which has become the universal symbol for online search. A user looking for this functionality will not have a problem here.
This pattern should be followed in all projects targeted to a diverse user base.
Further Reading:
2. Clearly Marked Collapsible/Expandable Content
Websites benefit from collapsible panels and drop-down menus because they make for cleaner and less cluttered layouts. The hidden content in these interface elements can, however, impair a website’s usability if their presence is not clearly indicated.
When a user clicks on a bare link or button, they expect to be taken to a new page. But when a user clicks a link or button that has a hidden content indicator, they expect the new content to be instantly displayed (via JavaScript or AJAX) and have the option to hide it subsequently. Thus, a website should sharply differentiate between normal links and links that reveal new content via JavaScript.
Collapsible content, such as in side panels and menu trees, can be indicated with an arrow, triangle, or Windows Explorer-like plus/minus indicator. The panel that logged-in users see on clearly indicates that it is collapsible:
Below is the same page after the panel has been expanded to reveal a group of functions:
With the content in the panel now expanded, the arrow is rotated 90 degrees, suggesting that the same content can now be hidden or collapsed. This same principle can be applied to drop-down or fly-out menus, although these would not require a rotating arrow. Surprisingly, this feature is often omitted even on professionally designed websites.
Further Reading:
3. AJAX Loading Indicator
When you improve the user experience by loading content through asynchronous requests, make sure to inform the user that an AJAX request is being processed. Without this indicator, the user may give up waiting or wonder why nothing has happened in response to their click.
You can accomplish this in a number of ways; one way is to highlight a “Loading” or similar message in or near the location where the action will occur, as Google’s RSS reader does:
At the top of the screenshot is yellow highlighted text, which appears when the “Mark all as read” button is clicked, telling the user that something is happening.
Another way to indicate this is with animation or a revolving hour glass, which would be familiar to Windows users. An animated indicator is used on numerous websites, including , where users click a “More” button to view older tweets:
Once the button is clicked, and depending on the speed of the client’s connection to the server, a familiar animated swirling graphic appears, telling the user that their request is being processed.
AJAX loading graphics are available for free from a number of different websites, many of which allow you to customize the graphics with size, color and other options.
This type of visual indicator is important for asynchronous requests that don’t provide client-side clues about what activity is loading.
An AJAX-like indicator could also be used to enhance non-AJAX functionality that behaves like AJAX and takes time to load. This could include a photo gallery that loads a larger image when a thumbnail is clicked.
AJAX loading graphics and other indicators don’t actually speed up a page, but they do improve the “perceived” load time, which is often just as valuable as improving the actualload time.
Further Reading:
4. Location of Shopping Cart and Log-In and Register Functions
When users scan a page for the “Shopping cart” button or “Register now” link, the first place they look is the top-right corner of the page. Unless you have a compelling reason to do so, keep this functionality in its familiar location, or else you risk slowing down and disrupting the user experience.
Options and functions that would fall under this category include “View cart,” “Check out,” “Log in,” “Log out,” “Register,” “Submit link,” “Forgot password?” and even “Contact us.” This last item would usually be the last one in a horizontal navigation bar.
includes four such links in the top-right corner of its layout:
is another good example and also includes a shopping bag graphic:
5. Expiration Date Format on Credit Card Forms
When a form asks for your credit card’s expiration date, the format is always the same: the month, represented by two digits, followed by the year, represented by two or four digits (e.g. 03/11 or 03/2011). The four-digit format is how the expiration date appears on the credit card itself.
The best way, then, to collect this information and strengthen the user experience is to use two separate select boxes, one for the month and the other for the year. Don’t make the user enter the expiration date in a single text box, even if you provide instructions.
Here is a good example from the of Maui Divers Jewelry:
And here is an example of a poorly designed expiration date field:
Moreover, the month selector should not display the names of the months, but instead should list the numbers 01 through 12. There is no reason to slow users down by making them figure out that “08″ means “August.”
6. Easily Identifiable Links
This should never be a problem, but unfortunately some websites still do not clearly distinguish between links and regular text in the main body.
In most cases, the best way to indicate this difference is by making links a different color and underlining them. In some cases, a strong contrasting color alone is enough; but only underlining or just changing the color slightly is rarely enough and will often impair accessibility.
makes this distinction well:
These links would not be as visible if they were merely underlined but not changed in color. You wouldn’t design a button that didn’t look like a button, so why let text links blend into the main body? As most users scan text online, designers should ensure that all links are identifiable long before a mouse is rolled over them.
Source http://www.webdesignerdepot.com/2009/11/best-practices-for-6-common-user-interface-elements/
http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/3/
Bootstrap UI for Website
http://getbootstrap.com/components/
http://angular-ui.github.io/bootstrap/
http://designshack.net/articles/css/20-awesome-resources-for-twitter-bootstrap-lovers/
Generators
Bootstrap Custom Build
Before diving into great third party Bootstrap resources, it’s worth pointing out a great little tool right from Twitter that allows you to completely customize an impressive range of Boostrap features so that you can create a custom build that’s perfect for your project.
If you haven’t checked out Bootstrap in a while, you should give this a look because it’s new with Twitter Bootstrap 2.0. Not only can you use it to take an overweight download and transform it into something lean, you can also save yourself a lot of CSS work by customizing colors, fonts etc. before you even initiate the download.
StyleBootstrap.info
As with Twitter’s own tool above, this tool allows you to use a simple interface to customize various aspects of Bootstrap. The difference here is that this one focuses primarily on the visual, design aspects. You can easily go in and change colors, fonts, borders, and a lot more.
The app itself is also more visual than Twitter’s generator and allows you to see what your styles will look like before you hit that download button.
Beautiful Buttons for Twitter Bootstrappers
This is a simple little tool that only does one thing: helps you design great looking buttons for use with Twitter Bootstrap. It’s only comprised of fours sliders and a box to copy the resulting CSS, no less, no more. It won’t revolutionize the way you use Bootstrap but it is fun to play with.
Theming
BootstrapStyler
“A beautiful, reusable set of Bootstrap themes for $39″
A wonderful collection of different themes, all in-line with what you’d expect from modern, clean design trends. For a one-off fee, you can access and download all the themes in the collection. Really stunning design work, and $39 is a steal for this entire collection of themes!
WrapBootstrap
“WrapBootstrap is a marketplace for premium Bootstrap themes and templates. Impress your clients and visitors while using a single, rock-solid foundation.”
Think of WrapBootstrap as ThemeForest for Bootstrap. You can buy or sell custom styled Bootstrap themes. If you think it’s silly to spend money on a premium theme for a free resource like Bootstrap, just take a look at the success of the WordPress theme market. By default, Bootstrap sites all start to look the same and nicely designed themes can really add some nice variation while allowing you to hold onto the great benefits that Bootstrap offers.
Bootswatch: Free themes for Twitter Bootstrap
If you’re not convinced that a premium Bootstrap is the way to go, check out Bootswatch, a great resource for absolutely free Bootstrap themes. They’re not as overhauled as some of the premium themes, but they do offer a nice quick way to choose an alternative color scheme and typography setup.
Even if you don’t want to use a third party theme, these themes are worth checking out so that you can get a feel for how to alter the design of Bootstrap so you’re not always stuck in the same old boring format.
Galleries
Built With Bootstrap
Built with Bootstrap is an unofficial Tumblr blog that showcases various websites that, as the name obviously implies, have been built using Bootstrap. This is a fantastic resource for designers working with Bootstrap as it allows you to see what real developers are doing with the framework, which will inspire you to take it further yourself.
If you think that Bootstrap isn’t capable of leading to anything but plain looking design, this gallery will prove you wrong. Sites like Provo Restaurant really surprised me by not looking anything like a clone of the Bootstrap example pages.
For Mockups
Bootstrap Fireworks
This is a completely vector based UI toolkit built to mirror Twitter Bootstrap. This is great if you’re not a coder or just need to have a place to shuffle the pieces around without bothering with CSS.
This kit was created based on Twitter Bootstrap 2 so it should be up to date with elements that look just like they will in CSS.
Omnigraffle Stencil for Twitter Bootstrap 2
OmniGraffle is a Mac application that makes creating charts and diagrams super easy. It’s been adopted by many members of the design community as a great way to wireframe apps and websites.
The Stencil kit in the link above is an exhaustive attempt to bring all of Bootstrap’s UI elements into OmniGraffle so you can simply drag and drop to create mockups on the fly.
Free Twitter Bootstrap Widgets Library for Axure RP
Axure is a powerful, professional level application that allows you to build complex wireframes and interactive mockups. At $589 per license, it’s a solution for serious wireframers only.
If you’d like to work with Twitter Bootstrap and Axure, be sure to download this great free widget library, which includes perfect customizable representations of the Bootstrap items that work seamlessly in Axure.
Bootstrap PSD
I know what many of you are thinking, “Fireworks? Axure? OmniGraffle? Just give me a PSD!” Well you’re in luck, because Repix Design has take the time to create and distribute a detailed, customizable PSD containing all of Bootstrap’s various components.
If you like to do your wireframing in Photoshop and you’re a Bootstrapper, this free download is a no brainer. Go grab it now.
Other Goodies
Grails Twitter Bootstrap Scaffolding
Grails is web development framework or scaffolding for “agile, industrial strength, rapid web application development.” If you’re a fan of Grails but want to mirror the simple visual style of Bootstrap, you’re in luck because this is exactly what you’re looking for.
Font Awesome
Font Awesome is probably my favorite Twitter Bootstrap resource. It’s basically just an icon font, so anyone can use it for any project. However, it was specifically designed to complement the visual aesthetic of Bootstrap.
Font Awesome is free for commercial use, screen reader compatible, and contains a whopping 150 icons (a number that continues to grow). Bookmark this one because you’re going to love it.
Sass Twitter Bootstrap – Projects
When the Twitter folks built Bootstrap, they decided to make it even better with LESS, a popular CSS preprocessor that brings the magic of variables, mixins and a lot more to CSS.
The thing is, there’s a big split in the preprocessor fan base. Some people love LESS because it’s simple and incredibly easy to use, but many opt for the more powerful alternative: Sass. We can’t blame the Twitter devs for taking the LESS route but Sass fans need some love too! Fortunately, John W. Long has ported Bootstrap to Sass so now both sides of the preprocessor debate can at least agree on one thing: Bootstrap rocks.
Stylus fans need not mourn the fact they often fail to get a mention, there’s a Bootstrap Stylus port as well.
jQuery UI Bootstrap
jQuery UI is a library of interactive interface elements built on top of the immensely popular jQuery JavaScript library. It includes all kinds of great widgets and web elements to easily add a lot of functionality to your site.
jQuery UI Bootstrap attempts to bring the visual style of Bootstrap to the jQuery UI elements. The developer says that you can even use most of Twitter Bootstrap side-by-wide with it without components breaking visually.
WordPress Bootstrap – A WordPress theme based on Twitter Bootstrap
“We’ve built the WordPress Bootstrap theme so that it could be used as-is or as a starting point for theme developers. It’s built on top of the brilliant Bones theme framework by Eddie Machado and based on v2.0.1 of Twitter’s Bootstrap.”
It’s a responsive WordPress theme built on Bootstrap that allows you to use the awesome themes from Bootswatch. What more do you need to know? This thing is awesome.
Colorpicker and Datepicker for Twitter Bootstrap
Here are a couple of additional elements that you can add to Bootstrap. Both are free, well documented and fit right in with the Bootstrap aesthetic.
Tutorials
5 Incredibly Useful Tools Built Into Twitter Bootstrap
This article serves as a beginner’s introduction to Twitter Bootstrap and goes over some of my favorite features. It was written before the launch of Bootstrap 2, so there are even more features now, but it’s still a great first look at how the framework can be helpful to you.
Twitter Bootstrap 2: Bootstrap Goes Responsive
To follow up the previous article, I released this overview when Bootstrap 2 was launched. In it I mostly discuss how the responsive side of Bootstrap functions and briefly go over some of the other great new features.
Twitter Bootstrap 101
If you really want an all-in introduction to what Bootstrap is and how to use it, look no further than this Tuts+ multi-part video series from Dan Cochran. As with all their content, this series is top notch and super educational.
Articles: Building Twitter Bootstrap
In this fantastic article from A List Apart, Twitter Dev Mark Otto takes you behind the scenes and tells you about the logic behind Bootstrap, how the idea evolved and became a reality, and how it represents a key pairing of designers and developers.
#328 Twitter Bootstrap Basics – RailsCasts
Thus far we’ve gone through all of these resources without a single reference to the widespread Rails community. You guys can join the fun too though, this video will show you how to integrate Bootstrap with Rails via the twitter-bootstrap-rails gem.
How Do You Complement Bootstrap?
Now that you’ve see our list of awesome Bootstrap resources, we want to hear from you. Leave a comment below and tell us about how you use Bootstrap in your workflow and what third party resources you’ve incorporated into that process.
*******************************************************************************************************
Join Facebook Fan page https://www.facebook.com/pages/Itsoftware-Classin-Srilanka/380768322055448
Join Yahoo Group http://groups.yahoo.com/neo/groups/itclasssl/info
Home visits Individual / Group / Online classes in English / Sinhala / Tamil. Sample Projects/Assignments Exam Papers, Tutorials, Notes and Answers will we provided.
Call +94 777 33 7279 | eMail itclasssl@gmail.com | Skype ITClassSL
No comments:
Post a Comment