Thursday, October 9, 2008

Course editing User Interface changes

So the course editing page has always been a large page. Lots of things going on with it, changing the name and address, course details, and most important the tees associated with a course.

Current Look

Here's a screen shot of what the current edit course page looks like.

full_course_edit

Now when you're working on this page, you have to do a lot of scrolling and what not. And with our need to start placing even more information on this page, it started to get even longer. So to try and avoid the long pages, we're going to try out using a tabbed approach to this page.

Yeah, we've got tabs

First up is the score card. Everything that you've come to expect on this section is still the same. You will have a listing of all the current tees, and the ability to add a new tee just like before. Nothing has really changed with the functionality of the page, just the look of it.

scoreCard

The second tab is for the name and address of the course.

name_address

On this tab, you will have the ability to change the course name, the address, add/remove phone numbers, set the course to private or public and add in it's Ghin number if it's known.

Course Details is the third tab.

details

Now this tab is where we've really added in a lot more information for you the user to change and modify as needed. From here you can add a contact for the course, specific details about the course like the weekend and weekday rates, when it was built and who designed it, and even to be able to choose which types of grass are found on the greens and fairways.

Last we have a description tab.

description

We've gone and placed an advanced text box on this tab so that when a description is entered you can have paragraphs, listings, and bold and underline, most everything that you would expect from a simple text editor.

As you can see, at the bottom of tabs, there is a "save course" button displayed. Clicking this button at anytime will save all of your course information and return you back to the course home page.

Hopefully this layout will work out to be much easier for the user to work with and help keep our course database up to date. As always, comments are welcomed and encouraged.

No comments: