2

I am using Twitter Bootstrap UI for developing screens for my application.

I created the booking / appointment page.

enter image description here

This page will be used by hospital staffs. They want to quickly fill the data, because they collect all the data from user over phone, meanwhile they fill simultaneously.

The end user feel this page looks some what hard for them and they want this design to be improved from user experience perspective.

I have no idea on UX. User also may want to check the available date & time for the selected doctor in the same page in future.

How better we can make a better UX here? Any help/link/mock wireframe will be very useful.

I would like to refactor Payment(3rd & 4th row) and Duration(2nd row) very simple

5
  • The question that you are asking is specific to your problem and not something that is likely to help other people too. We don't allow localised questions like that, so I unless you can edit it to make it about a specific (more general) UX problem, it is going to be closed.
    – JohnGB
    Apr 21, 2013 at 13:34
  • @JohnGB I am looking on How simply I can organize the Price and related fields. Especially the fields like partly paid, fully, not paid & payment mode. So user can easily visualize
    – Billa
    Apr 21, 2013 at 13:43
  • That is asking for a review of your design, not posing a general UX question. If you want to ask things like that, feel free to do it in the chatroom, but the responses can be slow.
    – JohnGB
    Apr 21, 2013 at 13:52
  • 1
    You've aligned everything into a grid, but not aligned/grouped them in terms of context. You also have strong horizontal and vertical alignment. I can't tell if I'm supposed to scan it as columns or rows. Consider grouping form elements into groups.
    – DA01
    Apr 22, 2013 at 2:24
  • 1
    Also note that a grid might not be the right layout for a form. A grid typically is great for content, but for form elements, there needs to be some sort of relationship between elements. For instance, look at the spacing between UNPAID vs. FULLY PAID and the space between the PAYMENT TYPE checkboxes.
    – DA01
    Apr 22, 2013 at 2:27

2 Answers 2

4

While i know what your asking and the others are correct. I've gotten dinged on it as well an answer can be phrased so that it will inform the greater whole.

The above UI design might accomplish the business requirements. It's missing as stated what the user needs. How do we find that? First understand WHO you are designing for. Understand their day, how they work, what they NEED. Users have various pain points. Ask them what they are and LISTEN. A user will be more then happy to explain how X and/or Y could be better in order to make their lives easier.

In the case of a form designed like above. There doesn't seem to be a flow. A form has to take the user from one point to the next easily. Text can be placed within the form fields cleaning up the UI. With a cleaner look the perception is that the form may not be as complex, thus setting the users expectation on completion. A form such as the one above could benefit by utilizing some basic IA or Information Architecture, even within a form. Information Architecture is about how content is organized. A form such as the one above could have had buckets such as "Patient Info", that contained just the required fields in order to build that patients profile. The broad grouping of "Patient Info" informs as well as sets the expectation of what the user will accomplish within the area. This would be the same for other "groups" that contained fields.

If you or anyone else would like additional information you can find it at:

Beginners Guide to IA

What is User Experience Design

1

There are thick books about that... Extending what Tony says...

First, what you need to understand, that the customer is not the user.

Second, you don't make a data record to be filled according to a schema: you support a set of tasks divided in time and space which together fulfill the same goal.

In this current example, a wise choice would be to ask for 5-10 recordings of actual calls, and see what's actually asked, what is really important, not just what's stored at the end.

As I see, this form is popping up in several cases: both for initial contact, also for setting payment disputes, and signing off participation, all of which may or may not happen simultaneusly.

Perhaps it should have tabs for these different circumstances, or perhaps there should be separate forms for these tasks.

As the name implies, user experience is about the users, not about the customers.

Personally I usually start by asking users how their day goes and make them tell stories of specific customers ("tell me about the latest booking / payment dispute / course you have dealt with"), and show them quickly built interfaces.

There are lot of interview techniques, low-cost evaluation and research methods, find some good books on those (while I'm wary to recommend one, as it's an intranet app, About Face 3 would look like a wise choice, and either Designing for the Digital Age - so that would be from the same firm - or something more lightweight, like Killer UX or Designing the iPhone User Experience (no, that book isn't just about iPhones), or, if we want to approach this from a more technical standpoint, The Humane Interface might do)

In the age of Kindle, Kindle for iOS/ Android, Safari Books (for web & mobile) and other resources, any of these could be at your fingertip in a minute.

On the plus side: the form is neatly ordered into a proper grid!

2
  • On the plus side: the form is neatly ordered into a proper grid! And if the boxes are extended to be equivalent sizes ... that'll make it look pretty. Or, at least, consistent. Apr 22, 2013 at 2:39
  • Oh, a grid is a good start: it shows that the creator (designer) knows and cares about alignment. Proximity is more important, that's true, alao that repetition should be considered, but it's a good start, compared to the forms I've seen designed.
    – Aadaam
    Apr 22, 2013 at 7:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.