Show it off...

[Chuck]

I'd definately be interested in seeing it. You can attach images to posts here. I'm always looking for good interfaces that I can "borrow".

To start things off, here's an interface that I build for a recent client.

The first one is a list view for the companies database. Entering text in the field at the top filters the data in the list. Records can be flagged by shift clicking a record, and then a flag appears next to the record. Columns in the portal can be sorted by clicking on them. Clicking on a records takes the user to a detail screen (the General tab). The user can find the marked records by using the button at the top right. The Unmark All button unmarks all of the records being viewed.

This screen shot is one of the detail screens. Like the list view it also shows a portal, but this portal can't be sorted by columns, as is indicated by the columns not looking like buttons. Clicking a row here takes the user to the details for that row.

Hey, give me your comments. I'd love to get the thoughts of other developers.

Chuck

[agraham999]

Cool...looks great...nice and simple...thanks for posting...

Um...I'll post a couple shots here...I'm still in Rev 1...and although I built 90% if this in OS X...I'm currently testing on a PC.

This database is for a architecture firm...and design matters...so I built a UI that uses a palette of 256 colors. The icons look high-res, but are very small (well under 1k). This is a screenshot of the Contact manager. This is designed for 1024x768 and they all have 20" monitors...so I built it out to mimic an application. I am currently in the process of replacing my "working" icons with my own icons...the little white pill icons.

http://www.macos2go.com/fmp/screenshot1.jpg

Here is a shot from a List screen in Contacts

http://www.macos2go.com/fmp/screenshot2.jpg

Here is just one more...from the Leads/Project database...

http://www.macos2go.com/fmp/screenshot3.jpg

I'm about 30 days from completing this...and I will be changing some of the design as they test it out...and if we have any speed issues...I may scale back some of the images...but the Contacts database (empty) is only around 800k...and I've already tested it out with 10,000 records (twice their current db) and slowed my network down to 1Mbps and she runs extremely well on FMP Server. Plus their network is some dual backbone 100Mbps monster...and she'll be on a dedicated server with an array...no web interface yet.

[ March 13, 2002, 12:26 PM: Message edited by: agraham999 ]

[kenneth2k1]

Hey guys! Agraham: I have some questions. First, where did you get the various icons? Are they in a pack somewhere? Also, how do you get the shading or gradient effect on the file tabs and the toolbar below it?

I think both your guys' UIs look great! I want mine to look as cool!

Ken

[agraham999]

Since I am new to this forum...I was just wondering if people ever showed off screen shots of their work? I am in the middle of a project where I finally had full creative freedom (I am also a designer) so I got to flex a little Photoshop muscle. I built out a UI that uses such a small color palette...and yet gives the whole db a 3D/OS X Aqua vibe. The client has a super fast network...and each machine has a copy of FMP...so speed hasn't been an issue. I've tested it out on a 1MBps wireless connection on up...and once she loads the first time (about 15 seconds) she's fast. I'd love to share some screen shots and get input if anyone is interested!

I'd really like to see FM or another third party develop more advanced vector imaging tools...I'd prefer to work entirely in FMP and not have to go back and forth between three imaging apps.

[falkaholic]

check out: http://www.layoutmode.com

got some cool stuff on there, and templates. That where i got my aqua interface.

[Fitch]

Those are both very interesting examples. Nice job, Chuck and agraham999!

How much of your project cost is interface design, may I ask? I have a hard time "selling" the design part sometimes, the client is usually focused on just getting something functional.

[Chuck]

I'd say about 20% of the project that I showed above was dedicated to the interface. Whether the client is willing to pay is always dependent on the client of course. I'm working on a project right now where they aren't interested at all in getting a system like the one I shared. They are coming from a DOS based system that does the job, and that's all they want, something that does the job. It needs to work for the users, but it doesn't need to look pretty.

I find that the larger the project the easier it is to sell the idea of a polished interface. Perhaps this is because larger projects tend to be used by a larger number of people, and getting the interface to a point where it is easy to use is more cost effective in these cases than paying for the extra training. I was able to train the users of this system in about two hours of demonstration to the group.

Of course, the interface doesn't have to be polished as far as possible to be useful. A tab interface is proven and easy to implement. You may not need to implement the quick find idea and the flagging idea, but for this project those items were necessary for the users to be able to report easily on the data within the system.

Also, once you have built a usable interface, reusing it is easy. If I come across another project that has similar needs as far as the interface goes, I can repackage much of what I've done, perhaps polishing it even further for the next project.

Chuck

[d94dsj]

Hi guys,

Nice looking layouts you have produced here!

But just a word of caution:

The best looking layout is most often *not* the most effective/useful one for end user productivity and ease of use.

I suggest reading Ben Shneiderman's "Designing the User Interface", *the* reference book in User Interface Design. The web site can be found at:

http://www.awlonline.com/cseng/titles/0-201-69497-2/website/

This is the text book used to teach world-wide university courses in User Interface design, and there's a lot of pitfalls to fall into that might not be obvious at first.

So don't reinvent the wheel! This guy has spent 20 years studying the subject.

I've studied the book myself in a User Interface Design course and was very happy to have read it afterwards.

One common mistake people seem to make is the overuse of colors in layouts. Colors should be used very sparingly, unless there is a specific reason to use them. More often they distract the user from the relevant information, than to add value to it.

When I design user interfaces, I go by the "Eight golden rules of user interface design", which is a kind of summary that's in the book. To understand them properly, you have to read the book (or web references of it), but here it is anyway if someone is interested:

1. Strive for consistency.

-Terminology

-Prompts

-Menus

-Help screens

-Color

-Layout

-Capitalization

-Fonts

-Most frequently violated

2. Enable frequent users to use shortcuts

-Abbreviations

-Special keys

-Hidden commands

-Macro facilities

3. Offer informative feedback

4. Design dialogs to yield closure

-Sequences of actions should be organized into groups

-Beginning, middle, and an end

5. Offer error prevention and simple error handling

6. Permit easy reversal of actions

7. Support internal locus of control

8. Reduce short-term memory load.

Just some comments,

Daniel

[agraham999]

I'l try and address everyone's questions...sorry this is so long.

First of all...I'm pretty familiar with design and UI...I am am author for O'Reilly & Associates and you can find my columns on www.oreillynet.com/mac about UI design, specifically for Aqua and OS X. Just look for Designing for Aqua. I also was a contributor for the new David Pogue OS X Missing Manual book (check the email chapter to see my photo ) I happen to disagree with some of the design theories that are based on 20 years of experience...because I feel we are at an evolutionary stage in UI design and execution...and some of us are finally able to use some of the design elements we have always wanted to, but were limited by system performance. I think it is time to break new ground and try new metaphors.

If you look at my interface, the color palette will pass a 256 resolution (may not here on this site but does on the original), and almost all colors are within a similar family...I don't think anything in there is distracting...and in fact the boldest color in the db is the Bug/Support icons and items that need to pull your attention, like the update item. The interface looks like it cost a million bucks on Macs or Windows...which is what I wanted...I wanted a cross-platform theme.

About my buttons and such...some of them are "place marks" for icons to come...but many of them are done. I use a combination of tools for my images...from Strata 3D, Photoshop, & Adobe LiveMotion. The white buttons I create initially in Photoshop...they are very simple constructions...basic colors (white) with the use of simple gradients and drop shadows. I then save it as a Photoshop image...and place it into LiveMotion so I can manipulate it as a vector image. I then scale it down...and I can quickly preview the button quality as I scale it down...and test it inside a Livemotion FMP UI prototype...so I know how far down I can go with the compression. Before I put the images in FMP I first build out a vector based UI so I can see how clean and far I can go down with the jpegs before it looks pixelated. Plus it is just a great way to prototype before you set to work.

kenneth2k1...you can create these shadings in Photoshop...it is a combination of multiple layers, gradients, embossing, opacity, dodge burning...blah blah. I bet you could also do them in Illustrator...but I haven't tried it.

Fitch...well...for me...design is every bit as important as the function. I've done video for film, TV, designed software, etc...and I am really picky and a bit of a perfectionist when it comes to design...but to give you an idea of how I design a FMP project...I have certain "place marker" icons that I use to prototype and then build out the functional db. I can get the fields set and layout complete...I just pull from a library I have in a FMP file. I then decide on a "theme" and build a very basic palette of buttons for that theme. Once you create the basic buttons...if you have a vector-based imaging program...you can build buttons in minutes. Some of these elements in this project are inspired from OS X...I wanted to have an Aqua-like UI. So...function first...and graphics second.

It is true not everyone needs a high-end UI...and I have built out very basic but working UIs...but...my projects tend to be large (time & $) and evolutionary...what I mean is this db, when done, will probably be a six month to a year project (part-time) and will cost a pretty penny...so when getting firms to lay out that kinda cash...you go the extra mile. My philosophy is that when you build a FMP db...you are building a program within a program...and if you personally spent $1,000 on a program...it better be good...so when a company spends $10,000+ I really want it to reflect the vibe of an actual program. I don't want the client to ever think that this is anything but an actual program.

Now I'm not going to go into every comment by Daniel...he's right about a lot...and my current UI will go through an evolutionary process based on when the client begins to use the db...but I will say this...there is nothing in this db that can't be done in 3 steps or less. The whole db has custom Messages with If/Else statements...a 9 year old could use it. You can build a complex mailing list with multiple print steps in less than 30 seconds. My clients are brilliant in what they do...but they aren't tech savvy...so I had to build this out to be extremely simple.

BTW...I met with them today to show them the current UI/functions...and they loved it...we're going forward full steam ahead...cause if they hated it...I may have gone insane!!!

Thanks for everyone's input!!! If you guys want...I would be willing to share some icons in the near future.

[kenneth2k1]

Agraham:

Yeah, I've worked with photoshop a good amount, and I can do the gradients using layers. But I had no idea that I could use those graphics INSIDE fields and other entities - that is I had no idea until yesterday. I went to the MacAcademy FileMaker boot camp here in San Diego and it was great.

Thanks for taking the time to reply.

Ken

[agraham999]

Ken,

Another great trick is putting those buttons in tiny Portals...you can create buttons that will appear only when certain criteria are met. For example in my solution...if a certain package is shipped in the Projects/Leads section...the Tracking button appears.

I think one of the greatest aspects of FMP is discovery...you just never know what you can do...I'm always surprised.

[Fitch]

I have to say, for a site on interface design, Designing the User Interface sucks! It doesn't inspire to go out and buy the book, that's for sure! I'd much rather read one of Alan Graham's articles, or something like Alan Cooper's The Inmates Are Running the Asylum.

But my current favorite has to be User Interface Design for Programmers. Almost the whole book is on the site, and lots of other interesting articles. Good stuff!

[rivet]

Why not copy what works. I think apps like photoshop, dreaweaver, and osx have enough to draw from. These guys have thought it through, pick the cleanest points a stick to them (template).

Above all, pick one font. And if possible keep good spacing between items.

Use the text tool to label your buttons. (you can not afford to photoshop buttons and their labels)

Finally unless you are really confident with colour (check your walls and wardrobe), don't go there. The only colours that are of any use in the 256 pallet are the greys. Apple only added blue and lighten the grey weight. with osX.

[LaRetta]

Hi Chuck! I would love to see what you are talking about here, but when I select the images (a page with an X) nothing happens. Did something happen to these images? Or am I doing something wrong to display them?

[LaRetta]

I would love to see these examples but when I select the links, it keeps saying 'Page cannot be displayed?' Did you move them, or remove them?