user interface for web design

12
USER INTERFACE FOR WEBSITE Name-Swapnil Angre. Edit Insti,Dadar

Upload: swapnil-angre

Post on 05-Dec-2014

7.082 views

Category:

Technology


1 download

DESCRIPTION

The user interface is one of the most important parts of any program because it determines how easily you can make the program do what you want. A powerful program with a poorly designed user interface has little value. Graphical user interfaces that use windows, icons, and pop-up menus have become standard on personal computers.

TRANSCRIPT

Page 1: User interface for web design

USER INTERFACE FOR WEBSITE

Name-Swapnil Angre.Edit Insti,Dadar

Page 2: User interface for web design

Q. What is user interface?

The user interface is one of the most important parts of any program because it determines how easily you can make the program do what you want. A powerful program with a poorly designed user interface has little value. Graphical user interfaces that use windows, icons, and pop-up menus have become standard on personal computers.

User interface design or user interface engineering is the design of computers, appliances ,machines, mobile, communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design.

Page 3: User interface for web design

Benefits for user interface.

User Interface Design is beneficial for both software and hardware. Some of the benefits of having a good User Interface Design are:

1.Ergonomics: Ergonomically correct user interfaces prevent industrial injuries and hence absence due to illness.

2. Fewer errors: Intelligently designed user interfaces drastically reduce the number of errors and their related costs.

3. Productivity / Save Development time: A better user design allows reduction of the development time spent due to reduced iterations and rework and overall better productivity.

Page 4: User interface for web design

Benefits for user interface.

4. Productivity / Save Development time: A better user design allows reduction of the development time spent due to reduced iterations and rework and overall better productivity.

5. Customer returning: If customers find a site or product usable, then the possibility that they use this site / product again improves drastically.

6. Customer returning: If customers find a site or product usable, then the possibility that they use this site / product again improves drastically.

7. Increase user satisfaction: When systems match user needs, satisfaction often improves dramatically.

Page 5: User interface for web design

Benefits for user interface.

8. Increase market share (competitive edge): The importance of having a competitive edge in usability may be even more pronounced for e-commerce sites. Such sites commonly drive away nearly half of repeat business by not making it easy for visitors to find the information they need.

This is benefits for user interface.

Page 6: User interface for web design

Why user interface design in so importance.

Therefore to achieve that the software must have a great user interface which lets you do what need to do (e.g. creating a project and managing a team) intuitively without you even really thinking about it.

A good user interface usually constitutes the following: 1.Positioning of elements in places the user expects them 2.Good use of color coding 3.Speed and fast page loads 4.Activity indicators 5.Help and tool tips

Page 7: User interface for web design

1.Positioning of Elements

Web designers and programmers (including myself) have often tried to be clever when designing the information architecture (where things go) in web pages. We often fall down the trap of trying to be too creative and thinking 'lets try something totally different' so we design things in such a way that might look cool, but in reality what happens is the user gets lost and has to re-learn how to work their way around your application or website.

There is a good reason why search boxes are often in the top right, and why navigation is tabbed, and why buttons often look the same. It's because the user expects them to be like that.

Users will spend a lot of their time using a Mac or PC and will expect the search to be in the top right with a little magnifying glass, and will expect a button to look a certain shape and change color when they hover over it. Because of these expectations in order to be a good UX designer you need to just go 'with the grain' and do what is expected. This will lead to happy users, and hopefully paying customers.

Page 8: User interface for web design

2.Color Coding

It's important to use color in your interface. Colors send signals to the user sub-consciously, so therefore you can make use of this with things like buttons and links.

For example, a Submit or Signup button works well in green because green means "Go" and feels safe. If it was red then users would hesitate before clicking on it because they would feel like they might be deleting something. Orange also tends to work well for a Signup button. A good example of a big, clear, green signup button. is on In Direo.

Having a rollover state is good too, and this can be done by either fading the button with opacity or by setting a different rollover color (e.g. a lighter shade or perhaps grey). This indicates to the user that they are over the button and will feel comfortable clicking it.

If you want to highlight something on a page, for example an important notice then a light yellow background can really make something stand out and draw your users attention.

Page 9: User interface for web design

3.Speed!

You need speed to save time! Therefore if your application takes 5 seconds every time someone clicks a button to load a page then that is BAD! If I want to set up a new project then I want to get it all set up within about 10 seconds. If half that time is spent loading the page then I will not bother using that application.

When I built Project Bubble was thinking about this from day one. For me being able to create a project and add to-dos straight away was an absolutely essential feature for the app. Being a paper and pen guy I had to have something that was as quick (if not quicker) than just getting out my notepad and writing down my to-dos, so this was all taken in to account when designing the UI for Project Bubble.

Page 10: User interface for web design

4.Activity Indicator .

If you are using AJAX to load pages then you must utilize loading GIFs or your users will not know anything has happened. It's important for your users to see that something is happening and they will be patient as long as they can see a loading image.

I made a transparent loading GIF for this exact purpose, which you can all download if you want. There are others I use as well on Project Bubble such as when changing the status between open and closed projects.

Page 11: User interface for web design

5. Principles of User- Centered Interface Design

Principle #1: Understand Your Users and Support Their Goals

Principle #2: Make Your Interface Easy to Learn and Enjoyable to Use

Principle #3: Remain Consistent Principle #4: Form a Dialog with Your Users Principle #5: Be Problem Free

Page 12: User interface for web design

Thank you.