Slashdot Mirror


Complex GUI Architecture Discussion?

XNuke asks: "I have been searching for intelligent discussion (on dead trees or otherwise) of the issues involved in designing very complex GUIs. Things on the level of TecPlot, AutoCad, 3DS, etc, where there may be very many different views of the same data and there are many degrees of freedom for the user. I am not interested in 'where to put the buttons', but rather the nuts and bolts of making the 'Well Designed UI' work. I guess I am looking for a sort of 'Design Patterns applied to a big deskptop application' sort of discussion. It is no problem to find discussions of Model-View-Controller concepts at the component level, but at the application level there seems to be nothing. Too often the architectural level discussions encompass non-interactive, server side design issues and not the extremely chaotic problems a client side application with many degrees of freedom has. Short of wading through megabytes of source code for KWord et. al., does anyone know of any digested information? There is obviously no 'One Solution' to this, but there must be something out there."

146 of 361 comments (clear)

  1. Human Factors by denubis · · Score: 2, Offtopic

    I'd recommend starting with Norman's The design of every day things. Then, if you're still interested, look over human factors resources. There are very large books that have been written on this question.

    1. Re:Human Factors by Anonymous Coward · · Score: 2, Offtopic

      Ive found Edward Tuftes books to provide a good basis for this kind of development. His focus medium is print (mostly) but I think the message is applicable to computer display as well. All Implimentation details considered, your biggest problem is the meaningful display of multivariate data.

      http://www.edwardtufte.com/290901521/tufte/books _v dqi

    2. Re:Human Factors by kherr · · Score: 2, Informative

      Apple's got some great stuff in their Human Interface Design guidelines. And before anyone screams about hating Aqua, there is a lot of general-purpose information there regarding why things should be done certain ways.

    3. Re:Human Factors by BohKnower · · Score: 2, Informative

      Look at what you shouldn't do, it is funnier.

      http://www.iarchitect.com/mshame.htm

    4. Re:Human Factors by Anonvmous+Coward · · Score: 3, Interesting

      "I'd recommend starting with Norman's The design of every day things...."

      I wish the Slashdot coders had read that book. I got my butt jumped because I used ['s to encapsulate a bold tag instead of the typical HTML greater-than signs. According to some, my being used to VBulletin syntax (used by several forums I vist) is a sign of how truely stupid I am. I think it's a sign of how unfriendly Slashdot's interface can be.

      It's not a poke at Slashdot, but rather an observation that book helped me make about UI. Slashdot's just a handy example. Now, when I write web pages, I have a better perspective of the things I should do to prevent mistakes like the bracket example from being irrecoverable.

      Anybody who's interested in design should read that book, it helps you understand why humans make the mistakes they do and what you can do to accommodate them. Hint: It's not because we're all too stupid to read a manual.

    5. Re:Human Factors by bhforj · · Score: 5, Insightful

      Read his F'ing post man: "I am not interested in 'where to put the buttons', but rather the nuts and bolts..." [Do you moderators even read the posts carefully?]

      He doesn't want fluffy designer stuff. He wants to implement a complex U/I with multiple views on the same data. Designing the interface is trivial. Implementing it is the problem. His question has no obvious answer other than: "just jump in; you'll get it right on the 2nd or 3rd try like the rest of us."

      BTW, MVC is crap. It falls down for much smaller problems than what you're looking at.

    6. Re:Human Factors by CaptDeuce · · Score: 2, Offtopic

      These are the same people who think having one common title bar that is shared by all people is a good thing ...

      Sorry, but your statement makes no sense. Are you speaking about the use of one menu bar shared by all windows of an application?

      If yes, there are two major advantages to this design: menus are always in the same place, and one menu bar takes up less screen space than multiple menu bars.

      ... and still refused to admit they were stupid to choose cooperative multitasking instead of premptive multitasking.

      Whoa. They didn't choose; the situation was dicatated by the fact the until System 6 there was NO multitasking! Cooperative multitasking was the quickest way to implement multitasking without breaking existing applications. Apple stated very early on that they would eventually implement preemptive multitasking but, alas, it never came to pass. The endeavor died with the failure of Copeland. Then Apple bought NeXT.

      And lets not forget the whole mhz myth marketing scheme. I think you should take anything Apple tells you with a block of salt.

      Don't you mean the Intel Mhz myth? Where a higher clock speed CPU is automatically faster than a lower clock speed CPU just because one number is bigger than the other?

      --
      "Where's my other sock?" - A. Einstein
    7. Re:Human Factors by fault0 · · Score: 2

      > I just built an overclocked P4 running at 3.06 Ghz in order to accomplish some video work that most people with stock Macs can do out of the box.

      Uh, I've done video work as far back as my Apple Quadra 840 av (processor: Motrola 68040 @ 40mhz I beleive), and on PC's as far back as my Pentium Pro 200 box.

      What the hell kind of video work are you doing that requires a overclocked 3.0 ghz p4 and not something mainstream like a AthlonXP 2100+ or p4/2.1ghz?

    8. Re:Human Factors by fault0 · · Score: 2

      You can't exactly "do" OSX.

    9. Re:Human Factors by Permission+Denied · · Score: 2
      there are two major advantages to this design: menus are always in the same place, and one menu bar takes up less screen space than multiple menu bars

      These advantages are nearly irrelevant compared in importance to the real reason why the menu is at the top in MacOS. The reason the Mac has a menu bar at the top of the screen is because this permits an infinitely large target area for clicking. There is no point to the menu bar at the top if the very top pixel of the screen is not clickable. Observe an experienced Mac user for a bit and you'll see that they never "aim" for the menu bar but rather "throw" their cursor toward the top of the screen.

      This is not an intuitve concept and lots of people get it wrong. Examples include many of Microsoft's products that allow a full-screen view but do not make the top pixel of the menu or toolbar clickable, and how the very bottom pixel of taskbar buttons and the start menu in Windows is not clickable. KDE has been offering a menu-at-the-top feature for quite a while now, but it is only recently that the top pixel has been made clickable (they did this by moving the entire menu up three pixels - apparently, it was not possible to specify that the widget should not have any unclickable border, which indicates an underlying problem with the toolkit design).

      This has to do with Fitts Law. Click here for the google search and read the first two links. Both links show experimental data reinforcing the theory.

      Note: I don't like Macs very much (hardcore unix guy, wrote my own window manager, my desktop looks like the Freshmeat ratpoison story from earlier today), but this research actually makes sense.

    10. Re:Human Factors by spongman · · Score: 2

      And RiscOS (which also had a 'dock') predated NeXTStep, I believe.

    11. Re:Human Factors by Anonvmous+Coward · · Score: 2

      "b.) dumb the user down. don't underestimate this." -- Is this the 'make the interface dumb, make the user dumb' myth? Heh.

      I think you make good points, but you also took my suggestion to an illogical extreme. I did like this point in particular:

      "It's seems like the computer got a mind of his own sometimes..."

      Microsoft has taught us the danger of this. I appreciate IE for executing bad HTML as smoothly as possible, but I don't appreciate Word's occasional altering of my grammar. I wrote a story once about an alien race called the 'Tahn'. Word, instead of scribbing a little line under it, changed it to 'Than'.

      I think it's fine for Word to put little squiggly lines under the words it doesn't understand, but auto-correcting a word can be a major no-no. (Which is basically the point you made.)

      I mentioned that you took my post to an illogical extreme. I figured now'd be as good of time as any to explain what I had in mind. Let's pretend that my error was a common error. Slashdot could make a couple of choices: A.) Accept the VB tags as a macro to the tags I'm really trying to do. or B.) When I preview the post, have it underline the tags that it spotted as a problem. "Oh, duh."

      I did preview that post, but the reason I missed it is because it looked exactly like the text I was editing. Brain fart on my part, not denying that. It was like "yeah I typed that in." The error was caused by auto-pilot. Heh.

      Now, here's another question: Should Slashdot implement that change? Nah. It'd have to be a pretty frequent problem.

  2. My Favorite GUI by Zero_Satisfaction · · Score: 3, Funny

    C:>

    1. Re:My Favorite GUI by HogGeek · · Score: 2, Funny

      My favorite gui...

      #

    2. Re:My Favorite GUI by T3kno · · Score: 3, Insightful

      C:> ?? Been a while eh... C:\> (ala prompt $p$g)

      --
      (B) + (D) + (B) + (D) = (K) + (&)
    3. Re:My Favorite GUI by tigertigr · · Score: 2, Funny

      My favourite gooey:

      Nougat.

    4. Re:My Favorite GUI by Dr+Caleb · · Score: 2
      If I want a Gooey interface, I'll order a pizza.

      --
      "History doesn't repeat itself, but it does rhyme." Mark Twain
    5. Re:My Favorite GUI by Tablizer · · Score: 3, Funny

      Modernize your C-prompt:

      <form>
      <input type="submit" value="C:\>">
      <input type="text" size=60 name="command">
      </form>

  3. HCI by RobPiano · · Score: 2, Informative

    Lots of research on Human Computer Interaction. Google it and also check out the digital libraries at ACM. (acm.org)

    1. Re:HCI by tomhudson · · Score: 3, Insightful
      Lots of research on Human Computer Interaction. Google it and also check out the digital libraries at ACM

      Actually, Google's interface is one of the best examples of design and functionality going.Check out their cleanly laid out News area.Beats CNN, etc.

      That's got to have had something to do with its' universal appeal

  4. For UI Reference by airrage · · Score: 3, Informative

    I've liked The Humane Interface: New Directions for Designing Interactive Systems, written by Jef Raskin. He was one of the early Mac engineers. This maybe a little higher-level than you are looking for though.

    --
    "This isn't a study in computer science, its a study in human behavior"
    1. Re:For UI Reference by bluethundr · · Score: 2, Informative

      Jeff was a little more than one of the early macintosh engineers. He was the originator of the Macintosh project. The guy who decided to call the Mac a "Mac". Though he originally wanted to call it the McIntosh, there was a high level audio component manufacturer of the same name and Apple's lawyers decided to change the spelling of the name to "Macintosh". Though as Theodore Nelson pointed out in his classic geek opus Computer Lib/Dream Machines, the name "Macintosh" if you actually followed the rules of English syntax would be pronounced "Mah-Sin-Tosh".

      I'm on a reading tear at the moment of old computer books where they are talking about the design of the interfaces that we have all come to know and love (books from a time when these were all new ideas). I plan on topping it off with Jeff Raskin's new book.

      As far as actually designing interfaces goes, several of my friends who actually design interfaces for a living have claimed that this book has been a tremendous help in providing a direction and design philosophy. Most people who design interfaces for the web, for instance, don't seem to ask themselves questions like "How would I design a telephone if I had never seen, never heard of what this device was or was supposed to do".

      --
      Quod scripsi, scripsi.
  5. Mac gets it right. by Faggot · · Score: 2, Offtopic

    Macintosh gets UI design right with Interface Builder (which came from NeXTSTEP). I cannot recommend it enough.

    --

    But what do I know. I'm just looking for anonymous gay sex.

    1. Re:Mac gets it right. by IamTheRealMike · · Score: 2, Troll
      Actually MacOS itself gets it wrong in quite a few places, for instance the muscle memory destroying zoomable Dock and the visually noisey stripes everywhere. They also vary the theme between aqua and brushed metal seemingly at random in their apps collection. This goes flat against their own HIG.

      Also, iirc Interface Builder is based on absolute positioning mostly, with guidelines to let you line things up. The technique used by Glade/GTK/XUL, box packing, has several advantages like being able to scale the GUI up to any size you like (good for resolution independance) in any aspect ratio and still have it look right.

      Anyway, I digress. I don't think this guy is talking about desktop design. He's talking about fantastically complex pieces of software, probably specialist stuff.

      I'd suggest he exames emacs and vi. Given that they have practically no GUI elements, they nonetheless expose a lot of functionality via the keyboard (and mouse too). It may be worth considering having a "lite" graphical UI and a heavy duty keyboard based UI for this question.

    2. Re:Mac gets it right. by Faggot · · Score: 4, Funny

      iJesus God, please don't look to Emacs and vi for insight into good UI design.^[ZZ^J

      --

      But what do I know. I'm just looking for anonymous gay sex.

    3. Re:Mac gets it right. by ZxCv · · Score: 4, Informative

      They also vary the theme between aqua and brushed metal seemingly at random in their apps collection. This goes flat against their own HIG.

      If you would read the actual Apple HIG, they say that apps which are meant to replace a real-world item/function (such as Calculator, iCal, iTunes) should be built with the brushed metal look. All other apps should use the default, untextured look. Just thinking over the apps included in OS X, it seems to me like they follow this guideline fairly closely.

      --

      Perl - $Just @when->$you ${thought} s/yn/tax/ &couldn\'t %get $worse;
    4. Re:Mac gets it right. by IamTheRealMike · · Score: 2
      Hmm, interesting. I hadn't realised that was the connection.

      Still, it seems rather arbitrary. What does this distinction gain the user, when nobody other than those who know their HIG inside out can figure out the connection? Also, some of those app connections are somewhat dubious. What does QuickTime replace? A VCR perhaps? What about iChat. The closest analogy in the real world is a phone, but that's very rough indeed. If the Address Book is a replacement for a real world item, why is the text editor not (replacement for notepad)? I dunno, and don't really care to be honest. I was just pointing out that Apple are not the gui design gods people often assume they are.

    5. Re:Mac gets it right. by edremy · · Score: 3, Insightful

      If you would read the actual Apple HIG, they say that apps which are meant to replace a real-world item/function (such as Calculator, iCal, iTunes) should be built with the brushed metal look.

      They break this numerous places: in fact, virtually everywhere.

      By the definition above, *everything* should be brushed metal. Word processor replaces pencil/typewriter. Spreadsheet replaces graph paper. Sherlock replaces phonebook/dictionary. Photoshop replaces sissors/paste/darkroom.

      If you try and tighten it down to obvious objects like iTunes replacing a radio, then why is iChat brushed metal? Why is iMovie brushed metal and Final Cut Pro Aqua? They do exactly the same thing!

      This is one area where Apple is just out to lunch. The HI folks had nothing to do with brushed metal: it's clearly a Steve "That's cool: go with it" decision.

      --
      "Seven Deadly Sins? I thought it was a to-do list!"
    6. Re:Mac gets it right. by PainKilleR-CE · · Score: 2, Insightful

      If you would read the actual Apple HIG, they say that apps which are meant to replace a real-world item/function (such as Calculator, iCal, iTunes) should be built with the brushed metal look. All other apps should use the default, untextured look. Just thinking over the apps included in OS X, it seems to me like they follow this guideline fairly closely.

      Except that they only added that to the HIG after 10.2 was released. Not to mention that some of their choices are questionable in terms of both using and not using the brushed metal look. Let's not even go into the fact that QuickTime on Windows breaks almost every design guideline for Windows (and most people didn't even realize there were guidelines for Windows, it's a much smaller document than Apple's anyway).

      --
      -PainKilleR-[CE]
  6. Map it out by PhysicsScholar · · Score: 3, Funny

    Use self-organizing maps for clustering.

    These work well with the visualization needs that you and your group have as well for the upcoming project; search the Web for the Kohonen learning algorithm and apply a simple summation over each term in the respective vector, remembering to square each quantity as well.

    This way, the topological view of your program's user interface will be well-refined, easy to navigate, and of a very high resolution (for CRTs, at least -- LCD monitors refresh too quickly and you may get relics [blurs] from high-oscillating models).

    --

    Department of Physics and Atmospheric Science, Dalhousie University, Halifax, N.S., Canada, B3H 3J5
    1. Re:Map it out by frost22 · · Score: 2

      this sounds awfully a lot like fake techno babble.

      --
      ...and here I stand, with all my lore, poor fool, no wiser than before.
  7. intelligent discussion by Anonymous Coward · · Score: 3, Funny
    I have been searching for intelligent discussion

    So you wrote into Slashdot expecting that? Please!

  8. Carnegie Mellon's Human Comuter Interaction... by fosh · · Score: 4, Informative

    Here at CMU they have a whole school in the school of computer science to deal with this issue. Check them out at http://www.hcii.cs.cmu.edu/ .

    They seem to have a bunch of projects relating to what you are doing here

    Good luck,
    --Alex

    1. Re:Carnegie Mellon's Human Comuter Interaction... by back_pages · · Score: 3, Interesting

      I'm applying to Virginia Tech's grad school in computer science, and they have a HCI program. I'm not really interested in software design, but stuff more along the lines of ubiquitous computing and other projects that break the "computer is the tool and master" notion. Is this the type of thing that is addressed in HCI programs, or are they more of a sophisticated study of where the "Ok" button should go and how to magnify the screen for vision impaired people? Both? Neither?

    2. Re:Carnegie Mellon's Human Comuter Interaction... by malpern · · Score: 2, Informative
      I'm in the CMU HCI masters program. For more details go here:

      http://www.hcii.cs.cmu.edu/People/Masters_students /Masters_current.html
      and click on the video on the right.

      Micah
      www.alpern.org

  9. Observers and Adapters by paulfwilliams · · Score: 5, Informative

    One common theme I've seen is observers and adapters. Your application components can be Observable. Observers register interest in them to get notified when the object changes. One problem of this approach is specifying the extent of a change. Just saying "I've changed!" isn't specific enough if that update would take a long time to process. If you can specify exactly what changed, then the Observers can process only what has changed.

    Adapters allow standard UI controls to embed domain objects without either layer knowing about the other. For example, say you want a tree to list Employee objects. The tree does not understand what an Employee is. However, you can make a tree that takes a TreeAdapter object that knows how to provde its name, subitems, handles renaming and drag-n-drop, etc. You can then make an EmployeeAdapter subclass of TreeAdapter that wraps an Employee and knows how to make a tree node out of it. If the EmployeeAdapter observes the Employee, it can handle changes to the Employee object.

  10. Learn from other successful software GUIs by VisualVoice · · Score: 5, Insightful

    Find a good model and see where your needs diverge. When we started on a project like this, the UI was a mess until we based the initial design on an existing piece of software where the user interactions were similar in nature (e.g. office productivity app, multiple views of data = MS Outlook). So if your app has similarities to AutoCad, Photoshop, or any other commercially successful UI, use it as a starting reference model for your UI, and see where the needs of your users diverge from the UI model that app presents. To do this you need to generate typical usage cases, and rank them in terms of how often they will be performed, and make sure those operations are obvious and easy to perform. The other advantage to this approach is users will appreciate that it works just like "software app X" and won't need much additional training.

  11. For UI logic design... by bubbha · · Score: 5, Informative

    ...try "Constructing the User Interface with Statecharts" by Ian Horrocks. If the complexity you are dealing with is logic complexity rather than "...put the buttons here" then this methodological approach to UI/application state design may interest you.

    --
    I want to be alone with the sandwich
    1. Re:For UI logic design... by HashDefine · · Score: 2, Informative

      I totally agree statecharts is the way to go for designing UI with even a little complexity. David Harels's (the father of statecharts)original paper [pdf]on statecharts is very nice and concise intro to state charts and since state charts are now a part of UML a lot of UML books cover the semantics of designing with statecharts as well.

  12. Don't think of it as a GUI by frank_adrian314159 · · Score: 5, Insightful

    ... especially if it is a very complex application that exists to do a single logically coherent - but complex - task. Instead of trying to fit into a WIMP/Menu/Command line paradigm, think of yourself building a control panel for the action. Look at information on industrial designs. But for God's sakes don't look at GUI guidelines for the platform you're building it for. The main argument for this is that you then have to train the user in your GUI. But, if the task is complex enough to need a complex interface, it's complex enough to require training to use. Finally, link the panel to conceptual actions, events, or information in the conceptual task space.

    --
    That is all.
  13. Re:AutoCAD by _Swank · · Score: 2, Insightful
    I'm not sure why he'd be asking about how to design a _good_ complex GUI


    I don't think he's asking this either though. He seems to be asking how to properly stucture your internal data and the appropriate design patterns to use to cleanly access this to make it easy to fit to a complex GUI, a GUI where the same data is viewed from several different perspectives and needs to 'look' and 'act' different depending on how it's being viewed.

    He listed autocad (and others) only as examples of complex GUIs with no judgement on whether it's good or bad. And he's not looking for good GUIs or bad GUIs or how to make either. He's looking for how to go about connecting the GUI to the underlying data.

    or that's how it reads in braille.
  14. /. search by Anonymous Coward · · Score: 4, Funny

    Welcome to slashdot.google.com!

    Too lazy to do a search yourself?

    Just have a thousand geeks search for you!

    1. Re:/. search by Hornstar · · Score: 3, Insightful

      Welcome to assholeforum.slashdot.com

      The guy's already said he's looked everywhere for something similar, now he's come to the 'enlightened' forums of slashdot where the most helpful post some people can muster is RTFM. Since it isn't clear that there even IS a FM, maybe you can cut someone a little slack, offer a helpful suggestion or shut the fsck up.

      Technological eletism helps no one. If you think what he's looking for can be found on Google... find it and prove us all wrong. If it isn't exactly what he's looking for, you can go crawl back under your hole where we will all leave you to peacefully revel in your astounding ability to program in assembly, while your festering glee grows with your ever-expanding intellect.

    2. Re:/. search by EnVisiCrypt · · Score: 3, Funny

      kid: Mom, how do I spell "elitist" ?

      mom: Google it, you lazy sot!

      Boy I'm getting tired of hearing posts like yours every ask slashdot....

      --


      *everything* is Orwellian to cats.
  15. More appropriate author by Anonymous Coward · · Score: 2, Informative

    I think some of the other suggestions miss your point. Peruse some of the Ben Shneiderman's books. They will probably give you more practical, specific, and useful help in this case than some of the other experts cited so far. Stuart Card deals with complexity as well, but some of that would be less practical.

  16. Re:Don't forget Rule Number One by PhysicsScholar · · Score: 3, Funny

    Or you could adapt a currently-existing user interface so that it allows for a rating of user intelligence, based on a simple scale.

    Assign points over time (which can be done since modern computers have sequential ability, rather than just a set of combinational logic gates).

    Why not attempt (or adapt) the following measure? --

    User Ability: {Charisma + Determination + Discipline + Raw Intelligence + Logic + Wisdom)/[ln(Pi*timeSinceInitialInstall)]}

    Develop a few simple tests and embed them into some questions (perhaps an inital registration script that loads upon first run) to find each value, and then run the numbers based on the above equation.

    Or just have a grad student do it for you!

    --

    Department of Physics and Atmospheric Science, Dalhousie University, Halifax, N.S., Canada, B3H 3J5
  17. GUIs are at times more elaborate than back end by sapgau · · Score: 5, Interesting

    I'm amazed sometimes on how easily a GUI is considered trivial or non-critical.

    For redundancy or performance reasons you want to have the same business rules executed on the GUI as well as verified on the server. The work required to set a trigger on the database is not the same for representing that on the GUI to the user. The amount of detail that goes on interactively with the user could hardly be managed directly by a server. Because of these I agree that more patterns besides the model-view-controler are needed.

    Currently I am on a project where a 'web' form takes 20 days to build but the store procedures that manage the data take 2 or 3 days.

    1. Re:GUIs are at times more elaborate than back end by Angst+Badger · · Score: 5, Insightful

      Currently I am on a project where a 'web' form takes 20 days to build but the store procedures that manage the data take 2 or 3 days.

      This is typical of UI issues in general, and I wish to heck more non-technical managers would realize this. The amount of coding and hard thinking that goes into making an interface reliable, idiot-proof, and easy to use can be truly astounding, and is often the largest part of implementing an interactive application. A ratio of 85% UI code to 15% non-UI code isn't at all unusual. Nor should this be surprising: interfacing with a database using a set of well-defined logical rules is almost easy compared to interfacing with the unreliable sack of semi-random chemical reactions sitting at the keyboard. Even when they're not clueless and stupid, people are among the most complex real-world phenomena any programmer will ever deal with.

      --
      Proud member of the Weirdo-American community.
    2. Re:GUIs are at times more elaborate than back end by pmz · · Score: 2

      For redundancy or performance reasons you want to have the same business rules executed on the GUI as well as verified on the server.

      I really hope those business rules are well-specified and documented. Otherwise the GUI and the server will never be in sync and no one will agree on the implementation. Sometimes, a development group must concede that they are incompetent at documentation and architect a system that favors simplicity over performance. Unfortunately, such self-realizing development groups are not common (if they are common, where?).

    3. Re:GUIs are at times more elaborate than back end by Steve+G+Swine · · Score: 2
      Otherwise the GUI and the server will never be in sync and no one will agree on the implementation.
      Been there, done that, got the T-shirt... didn't fit...
      --
      "Consider yourself a member of a virtual corporation with Mr. Torvalds as your Chief Executive Officer." - Linux Advocac
    4. Re:GUIs are at times more elaborate than back end by captaineo · · Score: 4, Insightful

      My experience definitely agrees... I've found that constructing an interactive (not necessarily graphical) interface to non-interactive code takes 2-10 times longer than writing the non-interactive code itself.

      I attribute this to the huge difference between batch processing and running an event loop. Programming languages are very well suited to "do this, then do that" style batch programs. But it is much more difficult to handle interactivity ("on click, do this, on keypress, do that") since you have to keep track of dependencies between internal data structures and the external interface.

      e.g. say you have a rule that when MyApp::toolbar_visible == true then the toolbar must be shown. But most programming languages don't allow this kind of declarative specification. Instead, you have to track down every line of code that modifies MyApp::toolbar_visible, and tack on extra code to hide/show the toolbar depending on its new value... Or, if you have a slider control that is supposed to reflect the value of some variable. You again have to track down every point where that variable can be modified, and insert code to update the scrollbar.

      MVC helps here, but it's still annyoing - instead of the simple "MyApp::toolbar_visible = true;" you end up writing something like "MyApp::toolbar_visible = true; MyApp::notify_toolbar_change();" Ideally you should only need the "= true" part, and the language runtime should figure out that the toolbar needs to be shown.

      I've seen some attempts to use declarative specifications for interface elements, like NeXT's interface builder and TCL's "watched" variables. But none of these are really mainstream. (I don't have much Visual Basic experience - is that declarative?)

    5. Re:GUIs are at times more elaborate than back end by refactored · · Score: 2
      After banging my head against that one I find you have to ask me very hard and explain very nicely why you want a GUI instead of a command line....

      Sure, sometimes its nice, but more often its just plain dumb to have a GUI.

    6. Re:GUIs are at times more elaborate than back end by servo8 · · Score: 4, Insightful

      Why not use accessor methods instead of exposing the variable directly? Then you could call your notify method in the setter for toolbar_visible.

      Some languages (such as C#, VB.NET, or Python) even provide built-in support for accessors -- this uses the same syntax as a regular field access, so it is transparent to the user.

      For example, in C#, you could write this as part of MyApp:

      private bool mToolbarVisible = false;

      public bool ToolbarVisible
      {
      get { return mToolbarVisible; }
      set {
      mToolbarVisible = value;
      NotifyToolbarChange ();
      }
      }

      and then later:

      MyApp app = ...
      app.ToolbarVisible = true;

      and it would call notify automatically.

    7. Re:GUIs are at times more elaborate than back end by captaineo · · Score: 2

      Oh yes, I see your point. Accessor methods can definitely improve the syntax of MVC systems.

      I really wish I could just make a statement like:
      "mToolbarVisible IMPLIES toolbar_window.visible"
      and then the language runtime would figure out that writes to mToolbarVisible should cause the toolbar to show or hide itself.

      Inklings of this idea are present in GTK's widget classes - you can declaratively specify position/size constraints for each widget (e.g. "this widget must be aligned to the right side of the window and half as tall as the enclosing window"). GTK takes care of handling resize events automatically. You don't need to write any "onResize" handlers; the widgets automatically configure themselves to satisfy your constraints.

      There is also the issue of interfacing with libraries that weren't written with GUIs in mind. The Toolbar example implies that whatever object contains mToolbarVisible also must contain a list of views that want to be notified of toolbar events. It may be difficult to set this up if the Toolbar container is implemented in a library that you can't control (or don't even have the source to!).

    8. Re:GUIs are at times more elaborate than back end by Electrum · · Score: 2

      e.g. say you have a rule that when MyApp::toolbar_visible == true then the toolbar must be shown. But most programming languages don't allow this kind of declarative specification. Instead, you have to track down every line of code that modifies MyApp::toolbar_visible, and tack on extra code to hide/show the toolbar depending on its new value... Or, if you have a slider control that is supposed to reflect the value of some variable. You again have to track down every point where that variable can be modified, and insert code to update the scrollbar.

      Delphi has properties which do exactly that. Setting the property value executes code, which can update the GUI.

    9. Re:GUIs are at times more elaborate than back end by captaineo · · Score: 2

      Thanks for the example. Yes, it looks like templates can be used to implement accessors in C++ easily...

      However I don't think you fully understand my "IMPLIES" concept. It declares a relationship between two things. The runtime should be smart enough to decide what action to take when one thing changes.

      I want to write:

      class Foo {
      Toolbar m_toolbar;
      bool m_toolbar_visible;

      m_toolbar_visible IMPLIES "m_toolbar is visible"
      };

      I want the same results as if I had written:

      class Foo {
      Toolbar m_toolbar;
      bool m_toolbar_visible;

      void set_toolbar_visible(bool new_value) {
      if(new_value == true)
      m_toolbar.show();
      else
      m_toolbar.hide();

      m_toolbar_visible = new_value;
      }
      };

      I much prefer the first code example, since it simply states the relationship between the boolean and the visibility of the toolbar. The second code example, which is what we are all accustomed to writing, is less direct and more verbose and error-prone.

      Hmm, perhaps this could also be accomplished with template magic =)....

  18. Re:The gui acid test by OneEyedApe · · Score: 2, Interesting

    no, i think that would be "idiot-friendly"

    --
    Life sucks, but death doesn't put out at all....
    --Thomas J. Kopp
  19. MVC is the pattern by Anonymous Coward · · Score: 3, Interesting

    MVC is the pattern at a high level. There are generalized approaches which you mention in your question. The "complicated" UIs you are talking about - for graphics programs etc. are geared towards the sophisticated, committed and very busy professional who is using a vast number of tools and techniques to get their job done. A well designed interface of this type uses the "Direct Manipulation" approach on top of a large complex model (see Visio).

    Other common approaches are essentially Use Case driven and can be very directed (see Installshield). Or more generalized (see phpAdmin, /., many others).

    Also people are VERY particular about the kind of interaction they like for a given set of tasks. When I design a UI I use MVC (or more usually M VC) and map out my UCs very carefully and in a fair amount of detail. Then I do prototyping to prove the design/UCs (often the users cannot give a good description of what they want until they are sitting down and using something).

  20. The Humane Interface by t_hunger · · Score: 5, Insightful

    I really like the book "The Humane Interface" from Jef RAskin.

    I found it on amazon where one reader stated that "Once you read this book you will know why you have the programs you hate." He is right... I absolutly loath vi now (not that emacs is that much better of going after Raskin;-).

    --
    Regards, Tobias
    1. Re:The Humane Interface by t_hunger · · Score: 2, Informative

      By the way: There is a project trying to realize the ideas of Raskin on SourceForge: look here.

      It is for macintoshs only IIRC.

      --
      Regards, Tobias
  21. Anything by Alan Cooper by Krelnik · · Score: 4, Offtopic
    Check out anything by Alan Cooper. His "The Inmates are Running the Asylum" is more of a rant than a guidebook, but still excellent reading. "About Face" is probably more of what you want.

    He would call what you are talking about "interaction design" not "interface design". The Inmates book makes a good case for how the two are different and why interaction design is a better approach.

  22. The revenge of the clippy by jukal · · Score: 4, Interesting
    a couple of days ago we ended up thinking something like this with my work mate. This might be sci-fi, sorry :) but: What if, in the beginning, there would be no GUI at all. In the beginning, all of the users would only work with shell - they would whip in commands like "useradd -u 120 -g dls -d /apps/dls -s /bin/ksh -c "comment" -m dls " and after doing this they would tell the computer: I did this to achieve this. There would be some kind of fuzzy logic to make the computer understand how to utilize this in future - to make it generic. Then suddenly, you would only need to tell the system: do this. Well, the discussion did not end here, it included a kind of evolution model in which the operating systems would be connected in kind of P2P network - the new things that each of the computer users had taught would be distributed, evaluated and ranked. Some ideas would be killed, some would stay alive and evolve... the discussion did not end here either: how about, if in the beginning there would be no operating system at all - just the very raw beginnings of a kernel, and then the users would for example teach the system to boot....

    it must be something that we ate.

    1. Re:The revenge of the clippy by Big_Breaker · · Score: 4, Interesting

      That is a great idea but its implementation would be extremely difficult.

      GUIs try to present the subset of options that are meaningful to the computer in a consistant manner.

      For instance if option B is only available if option A has been selected a GUI can help enforce that constraint. A shell type command line can't help the user make acceptable choices (generally).

      The graphical framework helps the user organize his internal thought process to work in harmony with the interface. That the interface pushes the user to think a certain way is part of why interface preference is very personal.

    2. Re:The revenge of the clippy by jukal · · Score: 2
      > GUIs try to present the subset of options that are meaningful to the computer in a consistant manner

      Yes, exactly. That's why I think the sci-fi story I presented should be called CUI (chaotic user interface :) it would use subsets of options to describe supersets of the options. Yes, very hard to implement but I consider this SETI@home :) in both cases we try to search for something that we know should be there but have no idea what and where to search for :)

    3. Re:The revenge of the clippy by jukal · · Score: 2
      > Looks to me like you were getting to a global database of macros ranked by frequency of use...

      Exactly not. An alias does not make the computer understand how to use it generically - or how to combine the information with other learnings. Here's an example: you go out - it is raining - you take the umbrella and see it protects you from getting wet. Your learn something new about umbrella and your environment - giving you new understanding and therefore new possibilities. With a macro, you only limit your possibilities.

    4. Re:The revenge of the clippy by oliverthered · · Score: 2

      Easy (ish).

      first you have to re-organise the statement, don't tell x to take z and .....
      change it to
      z -> x ->y

      The input data need to be typed, as does the output of each stage.

      so that you can say

      z -> thisdatatype,
      and the computer will know how 'you' usualy perform that operation, on that type of data in that location at that time of day in the office looking out of the window with a pen in you hand whilst playing Quake.......

      The CLI statement is a bit complex for starters, but something like file save dialogues, how you like to view the data after performing xyz, what you usually do next (print on a monday)
      It'll be a bit anoying at first (like those M$ hiding menues) but after a while the UI will taylor it's self to the way you work.

      So on a monday you'll always get the print out of the data without having to do anything, just because that's what you've always done.......

      --
      thank God the internet isn't a human right.
  23. Pick a rule and stick with it. by chaboud · · Score: 5, Interesting

    Whenever you are visually representing data, and providing a means by which to manipulate the representation, consistency is paramount. If you have three object types: A, B, C that are represented in the same visual space, an action on A should have an equivalent effect if taken on B or C.

    This was the primary concern we had when I was working on Vegas Video. At first, we treated audio and video differently, thinking that different media types would require different interfaces, but we quickly realized that most actions for one media type had a corresponding action for the other (i.e. Fade out). When a coherent interface element did not exist, we extended the user interface for the given media type. We never allowed an interface element to exhibit different behaviors for different media types.

    Of course, Vegas Video is not the end-all of user interfaces, but I learned a lot about simplicity and consistence in interface design.

    It's the difference between a complex application and a powerful one.

    1. Re:Pick a rule and stick with it. by sahala · · Score: 4, Interesting
      Just to piggy-back on the parent... Whenever you are visually representing data, and providing a means by which to manipulate the representation, consistency is paramount. If you have three object types: A, B, C that are represented in the same visual space, an action on A should have an equivalent effect if taken on B or C.

      Jef Raskin (who wrote the Humane Interface) referred to this as using "modes". He strongly recommends that modes should be *avoided*. A lot of software developers build UIs that *wrongly* expose the internal representations of the data used by the application.

      In the Vegas Video example obviously sound and video are quite different types of data. To users, however, both are just media that they want to string together in some dramatic order. Users don't want to worry about whether they're in Audio Mode or Video Mode.

      I saw a few posts above that mentioned Raskin's The Humane Interface, and I strongly recommend the book. Some of the book can get a bit dry (particularly the usability testing methodology) but the higher level conceps are very sound.

  24. One Word by Quirk · · Score: 5, Insightful

    Emacs

    --
    "Academicians are more likely to share each other's toothbrush than each other's nomenclature."
    Cohen
  25. Re:Don't forget Rule Number One by BitwizeGHC · · Score: 2, Funny

    User Ability: {Charisma + Determination + Discipline + Raw Intelligence + Logic + Wisdom)/[ln(Pi*timeSinceInitialInstall)]}


    Isn't that in the D&D manual somewhere?

    Did I miss my saving throw against not being able to install Word?
    --
    N4st0r, trixx0r h0bb1tz0rz! Th3y st0l3 0ur pr3c10uzz!
  26. UI Resources list by tbonium · · Score: 5, Informative
    I found this list to be very helpful:
  27. maryland HCI lab by Anonymous Coward · · Score: 2, Informative

    pretty big HCI lab at univ. of maryland, college park, with lots of research publications and such. check it out at http://www.cs.umd.edu/projects/hcil/index.html

  28. Some useful links by PetiePooo · · Score: 2, Informative

    I'd check out material from Google, Amazon, The HCI Bibliography, NASA, the W3C, and Joel for starters.

    While some may scoff, the ACM has an article on the Windows 95 interface, a little bit aged by now. Though many in this forum dislike Microsoft for its other faults (the constant crashes, draconian business practices, etc.), a big part of their current success comes from the fact that their user interface is simply easy to use. They do their homework when it comes to that.

    My mom couldn't spell WWW when I set up my parent's computer for them a couple years ago. She complained that IE wouldn't go to the website after she typed in the address. It took me a while to realize that she wasn't pressing Enter when she finished typing the address in. That's why they have that little "Go" button next to the address box that I always get rid of right away.. Duh!

    This is a noble quest, young hero. God speed.

  29. Unidraw has what you're looking for by Scott+E.+Johnston · · Score: 5, Informative

    Looking for Design Patterns for complex interactive applications with multiple views? Take a look at the thesis work of John Vlissides, one of the Gang of Four: http://www.ivtools.org/ivtools/unidrawinfo.html

  30. The Question is NOT about Human Factors by jaaron · · Score: 5, Informative

    I've seen about 50 comments so far and all think the question is about User Interface design in terms of "Human Factors" as you mention. While Human Factors (and the book you mention) is important this is not what the poster is asking.

    The poster is asking about software archecture and design patterns. Think of it this way: Okay I want to code a new IDE, but I want to code it well. So what's the best way to get the UI to talk to the code that actually compiles the source code. Or another example: a database management suite. How do I best seperate the UI code from the code that actually talks to the database. And once I have them in seperate modules, how do I get them to talk to each other? This is a question about computer software design, not UI design (although, UI design is very important). The advantage to thinking this way though, is that when software is coded this way, people who do understand "Human Factors" and proper User Interface Guidelines can tweek and adjust the UI without modifying the underlying code that performs the logic of the application.

    The Model-View-Controller design pattern mentioned is a good start, although I'm not sure how well it scales to larger, more complex programs. (I'd love to hear from someone who has experience in this.) And of course the "Design Patterns" book by the 'Gang of Four' has other designs that might be more appropriate. Also, most complex applications will incorporate multiple design patterns.

    This is a very interesting question, one I've had before and I haven't found any good resources yet either. Perhaps the best resource would be to actually go through the code of a complex program like Mozilla, OpenOffice, or the like. Fun? Easy? Probably not, but you'd learn a lot.

    --
    Who said Freedom was Fair?
    1. Re:The Question is NOT about Human Factors by pmz · · Score: 3, Insightful

      How do I best seperate the UI code from the code that actually talks to the database.

      Actually, in this question lies the answer. On a sheet of paper, draw a line separating the paper into two halves. In one half write "UI Module" and in the other half write "Database Interface Module".

      These two modules can be written, so that the UI module uses only the public interfaces of the database module. This is the high level design of the application.

      Designing each module well is an entirely different challenge, since the quality of the database module's interfaces determine how resilient the application is to changing requirements.

      I guess the lesson here is that the really high-level design is trivial, but the design of each module is very hard and should be done by someone experienced in such things. Reading good books on the subject is only the beginning.

    2. Re:The Question is NOT about Human Factors by badavis · · Score: 5, Insightful

      On a sheet of paper, draw a line separating the paper into two halves. In one half write "UI Module" and in the other half write "Database Interface Module".

      Actually, this is considered bad form in an OO design. The UI "Module" (classes) should only talk to the Model classes, while the Model classes may or may not talk directly to database classes. They may be mapped to database tabels thru an indirection layer.

      There is some great discussion of this at Martin Fowlers website.

    3. Re:The Question is NOT about Human Factors by sahala · · Score: 2, Interesting
      The Model-View-Controller design pattern mentioned is a good start, although I'm not sure how well it scales to larger, more complex programs.

      What do you define as a large, complex program? A lot of enterprise software work done for F500 companies are built as web applications (Struts-esque) using the MVC pattern. These applications scale to 10,000 users (and more) and obviously run on some serious hardware setups. Most of the applications aren't that sexy...they really just streamline business processes and help (hopefully, but the cynic in me says doubtfully) save money.

      Anyway, back to the original question by the OP, there really is a dearth of information on the areas between architectural level patterns(MVC, blah blah blah) and the high level interaction-design/usability/experience world. I've found that in the software industry most of the nuts and bolts tend to be one-offs and specialized solutions, sort of whatever-it-takes-to-build-the-bridge. There are definitely existing toolkits, but when in comes down to it there's a buttload of unrefined work that needs to be done. Of course this is the case in any part of a significantly complex application.

      In my experience I've built some pretty nifty ways of building UIs and in some cases I've abstracted out a lot of the nitty-gritty. The interesting part, though, is that most of the clever stuff I came up with was already pretty much expressed in existing design patterns (GOF) or done the same way decades ago, just with different paradigms (web vs. mainframe, which addmitedly aren't too different). I guess my point is that these problems have been repetitively solved over time, but so little of it has been truely formalized in the same manner that other aspects of computer science and software engineering have.

      But honestly speaking user interfaces have really taken 2nd (or 3rd, or 4th, or -gasp- Nth) place to other topics in the ivory tower of computer science. Most kids coming out of CS undergrad programs are more excited about things like optimization, scalability, or building complex software like OSes and databases. After all, these are the hardcore, tried and true, well formalized product hallmarks of computer science.

      To get back on topic again, the OP mentioned being reluctant to wade through the source of KWord. It's a tedious activity, but studying how existing or even historical applications were designed can be highly beneficial. As I said above I've invented a new wheel quite a few times only to find out that it only mirrored a previously built solution.

    4. Re:The Question is NOT about Human Factors by Lars+Arvestad · · Score: 2
      On a sheet of paper, draw a line separating the paper into two halves. In one half write "UI Module" and in the other half write "Database Interface Module".

      I don't think that you are addressing the problems that the original poster is interested in. The question seems to be about designing modules dealing with complex GUIs for very complex data, and then the issue is not merely how to access data in a DB.

      For example, I have played around with products from Spotfire. They have products for viewing and manipulating or filtering a lot of data from multiple views. Take a look at some example pics and try to disregard the marketing crap. Their GUI is very responsive and easy to use, even though you may have very complex dependencies between the views. You can interactively mess with data filters in one view and get immediate changes in all other views. Interaction and data visualiztion at its finest. (No, I have no connection with the company!)

      I'd think that designing such software takes a great deal of care of you want to ensure efficency, maintainability, extensibility, et.c. It is surely not just a matter of loading data into some datastructures!

      --
      Reality or nothing.
    5. Re:The Question is NOT about Human Factors by gli · · Score: 2, Insightful

      Bjarne Stroustrup says, (not in exact words) separation is easy, but the hard part is communication. This so true if you ever worked on a non-trivial sized project. It's very easy to think up a neat(seemingly) structure and draw some pretty diagrams. But only when you actually goes to implement them that all sorts of flaws begin to appear. This is where experience and maybe talent comes in. Everybody knows loosely coupled code is good. But how to design the architecture so that communication is not thwarted is the real challenge.

    6. Re:The Question is NOT about Human Factors by captaineo · · Score: 2

      A clean API between the graphical front-end and the back-end is a good start, but there are some deeper issues that need to be dealt with. A database or web application is fairly easy because the data flow is only one-way - the GUI either commands the database to give it some information, or sends new information to be entered.

      However many kinds of programs need back-and-forth behavior - e.g. say you're editing a spreadsheet that is embedded in a word-processing document, and you've got two views open - one on the spreadsheet alone, and another showing a "print preview" of the whole document. You change an entry in the spreadsheet. Now what? The application must figure out that it needs to pull the updated spreadsheet into the other window.

      Notice the key difference here - the back-end code , meaning the internal data structures where the spreadsheet is stored, MUST be made aware of changes so that it can inform the various front ends. I suppose you could wrap the entire back-end in a single MVC setup, but what if the back-end is the only code that knows the scope of the change? You don't want every view to be completely thrown out and refreshed for every trivial change to the spreadsheet.

      The only working solution I have found is to add interactivity features to the back-end. (e.g. each spreadsheet cell needs to contain a list of views to notify after a change). This is less than ideal because it pollutes the back-end code with MVC notifiers and dependency information - things that the interface needs, but are totally unrelated to the actual functionality of the back-end code. The MVC stuff just gets in the way of implementing a nice clean spreadsheet library.

      I have a feeling that a better solution would be an advanced language runtime that automatically tracks the data/interface dependencies for you. Are there any out there?

    7. Re:The Question is NOT about Human Factors by paulbd · · Score: 2

      a much better solution is to use a generic callback system such as SigC++. this allows completely anonymous notification by the Model of changes. any number of Views can attach themselves to the "signals" "emitted" by the Model - the Model has no idea how many (if any) other objects are interested in its state. it just "emits" a "signal" saying "i've changed" or "i've changed in this particular way", and everybody who cares about it gets to hear about it. its much, much, much easier to do this in languages with template implementations like C++ than in those that don't.

  31. Not an HCI question... by Fnkmaster · · Score: 5, Insightful
    Okay, the moderators are on crack today. Read the question - it's NOT a question about "where to put the buttons" (i.e. HCI/UI design) from a UI designer's perspective. The question is about proper development and coding practices (including design patterns more interesting and complex than just MVC) for building complex GUI apps, presumably from the perspective of a software developer working with a designer, or given a UI design that is already known to be good.


    I think part of the reason such discussions seem to be lacking out there is that each GUI toolkit has its own way of conceiving of event-based GUI interaction, and separating the presentation of a GUI element from the logic that handles it. Thus there is no real standard set of design patterns for GUI implementation (there are tons of sites I found using Google on GUI "Design Patterns" which are basically just HCI best practices for communicating certain kinds of concepts). For example, Qt uses the signal-slot mechanism. wxWindows uses EVT_ macros to associate an event with an action method. These encourage different ways of structuring GUI code.


    I am not saying it's impossible to come up with a set of rules of thumb for general GUI development and implementation in the same way that general design patterns for OO development exist to solve certain kinds of problems that are commonly encountered, but I'm doubtful they would be as useful as you would think.

  32. Some references here by JAS0NH0NG · · Score: 5, Informative
    Here are some references:
    • Dan Olsen's Developing User Interfaces. Dan Olsen is a professor of Human-Computer Interaction, formerly at Carnegie-Mellon, now at Brigham Young. his book describes the nuts and bolts of the internals of GUIs, including rendering models, event queues, event handling, graphics, and so on. Depending on your level of expertise, it may or may not be useful.

    • If you have access to ACM's digital library, check out the proceedings of CHI and UIST. CHI stands for Computer-Human Interaction, and is the main conference in that field, and looks more at design issues and evaluation. UIST stands for User Interface Software and Technology, and looks more at the implementation issues. There are several papers there describing the design and implementation of several complex systems.


      (If you have access to a university library, you can find those proceedings there as well)

    • Following up, check out the work of Bill Buxton. He and his students at Toronto have done a great deal of work with 3D interfaces. In fact, Bill Buxton also works at Alias | Wavefront, who create lots of tools for 3D modeling and rendering.

    • I'd also suggest looking at the Virtual Reality work done by others. I suspect that they have many issues in common, although the interaction is clearly different. Check out Alice by Randy Pausch and others (at Carnegie Mellon). Alice is sort of like Logo for 3D worlds. Fred Brooks, of Mythical Man-Month fame, also does work in this field. (I don't study virtual reality, so I'm not as familiar here)

  33. Architecture -- not interaction design by tswaterman · · Score: 5, Insightful
    Look guys, the question was about application architecture, not about GUI design, button layout, color schemes, etc. So, in that vein...

    You mention MVC. This is a very useful abstraction, but you're right in saying that it doesn't address the larger question of application architecture. One kind of global abstraction that seems to help for large interfaces is some kind of messaging system. For example, you can use a global queue of update events (sent by Models when things change) which all interested Views can lsiten to, and react accordingly.

    Some real problems come when you want views to react to changes so some other view (but NOT the underlying model data). e.g. changing from 2d to 3d display, you might want various menus to appear, disappear, or have entires change/gray-out. This breaks down the MVC abstraction to varying degrees.

    At the end of it all, I also haven't seen much in the literature on architectures for large GUI apps. I think this is because very few of them are really ever produced. Most apps you see are, at the base of it all, fairly simple, and require only one or two views with pretty straightforward control architecture.

    1. Re:Architecture -- not interaction design by KenSeymour · · Score: 2, Interesting

      Well, there is nothing to prevent some of your views also being models.

      Also, as an alternative to MVC, take a look at Presentation Abstraction Control.

      Google yielded this site, among others:

      http://www.vico.org/pages/PatronsDisseny/Pattern %2 0Presentation%20Abstra/

      --
      "We can't solve problems by using the same kind of thinking we used when we created them." -- Albert Einstein
    2. Re:Architecture -- not interaction design by bLanark · · Score: 5, Interesting

      Just been through all of the current posts, and no-one mentions H-MVC - hierarchical MVC. There's an article on it here. It's an interesting adaptation of MVC for complex guis, and can go right through the UI/client from the base to the smallest, tip-most configuration dialog.

      --
      Note to ACs: I won't mod you up, even if you are being funny or insightful. So take a chance! It's not real life!
  34. MS GUI is ok by phorm · · Score: 2

    Actually, most people hate MS for crashing, and don't mind the GUI. MS also tends to rip their ideas off from the best of others anyhow.

    Users are probably quite accustomed to the Microsoft look and feel (without the bluescreen look-and-feel) would probably do quite well using a GUI of this variety.

    Building a modular program with a GUI frontend would work nicely if done right, but it's good to keep in mind that this is what made some of the earlier windows suck. If the back-end is designed to accept the GUI it should work nicely however.

    1. Re:MS GUI is ok by Qbertino · · Score: 2

      You're right. One single virtual desktop is just fine. Any more open apps and it would crash anyway.

      --
      We suffer more in our imagination than in reality. - Seneca
  35. Let your users do it by Anonymous Coward · · Score: 2, Interesting

    If my experience is any indication, people who implement complex applications are not necessarily the best people to figure out what the user will do with them or how the user will wish to interact with them. You can write an initial GUI, but expect it to be lacking.

    One strategy to address this is make your whole GUI scripted. Implement all GUI commands with script language bindings, and implement your GUI as a script in this language (this can be done with Perl, Python, Tcl/Tk, etc.). Provide hooks for your users to create their own comands and extend the GUI as they wish. Now you don't have to figure it all out, because your users will.

    This model is used by many complex applications, such as IC design CAD frameworks (with which I am familiar). Just make sure you don't fall into the trap of thinking you need your own scripting language. Use an off-the-shelf language.

  36. Observe and Adapt. by plover · · Score: 2
    That's mostly true, and in general not a bad idea. Typically, consistency is good. Your example of Photoshop isn't a great one, though. Photoshop has one of the worst user interfaces I've ever had the nonpleasure of using. It's so bad I ran to the store to buy Paint Shop Pro. Photoshop may be powerful, the screens may be pretty and/or unique, the filters do what you want, etc., etc., etc., but it's so interface-challenged that it's operationally impossible FOR ME to pick up and run without practice and/or training. It may be fine for the devoted Photoshoppers, but it was not fine for me, and I suspect not for the average casual user. (And I'm not interested in a flamewar or Photoshop usage tips. I switched to the Gimp first but it's missing quite a few features I need. So I bought Paint Shop Pro and I now use it instead.)

    But again, the original question was not "how should my UI look" but "how should I architect my complex GUI application?" A previous poster mentioned Observers and Adapters, which I think is the best way to go with a multiple viewpoint app like his. I'd work to make this division occur at the highest level possible. I'd have Observers "register" with the viewed object requesting updates only when it changes. And I'd want this separation be so wide that it would even be possible to have the Observers running in a different process, or even connected via sockets from a different machine.

    Of course, that's just my opinion. I could be wrong.

    --
    John
  37. My thoughts by estar · · Score: 5, Insightful

    I am a designer for a CAD/CAM program that is used to control and make parts for metal cutting machines. The first thing you will need to realize that these types of application are considered vertical market applications.
    Everyone has a use for a word processor but not everyone has a use for one this programs but when you do you need it bad. When you design the architecture and the UI you need to keep flexibility in mind. This is not so much for the user but for you so you can met the needs of a SPECIFIC customer. It is my experience that customers really want the vertical market software they buy to aid their current way of doing things, not to change what they are doing to meet the needs of the software.

    A specific industry has a lot of common needs but there is enough variation that if you don't design flexibility in mind it will drive you crazy with tech support and lose buyers who can't get the software to do what they exactly want.

    There two things you need to consider for such programs. The architecture and the UI.

    I following many of the standard advice on designing UIs but here are a couple that I try to keep in my mind.

    1) Keep the focus of the screen in the center of the screen. Try to add widgets to the top AND bottom to keep the screen's focus in the center. For example there was a version of my software where the sheet of metal was bumped down so that it's center was a lot further down then the center of the screen. This is bad. The next version I redesigned that screen so that the widgets were equally distributed between the top and bottom. This way the user's eyes when they move to the monitor has the sheet exactly where it is needed.

    2) Work-flow, you should provide either a means via keyboard or mouse to accomplish common tasks. You can do one, the other, or both. However what you shouldn't do is mix the two. If the task has keyboard components you should try to enable the user to complete the task without moving from the keyboard. The same for tasks involve the mouse. Tasks that involve a lot of moving from mouse to keyboard leave user unhappy.

    Try to have a keyboard way and mouse way to do all tasks. Sometimes it isn't possible but if it is do it.

    3)Softkeys, toolbars are nice it is my experience that users respond better to text then icons. User like big fat buttons on the screen. What I come up with the idea of softkeys. If you look across the top of your keyboard it probably has 12 function key arranged in groups of 4. What I do is have eight buttons on the top or bottom of my screen split into two groups of four. The first four correspond to F1 to F4 and the second four to F5 to F8. I use F9 to F12 for special actions. F9 is generally used for "flipping" the softkeys. This give me room for 16 commands per softkey group.

    On the more complicated screen I have multiple groups of softkeys. For example Zoom, Cut, Edit Path, Sketch, Rotate, etc. Each having up to 16 commands. I also provide a way to switch between the groups.

    The advantage of this that the user can see exactly what they can do in front of them. They can use the mouse to click on the command or use the corresponding function keys. While I do use some toolbar buttons most of commands are accessed through the softkeys.

    4) Make important tasks very easily accessible. Use single letter or buttons to tie into the task. For example Edit Cutting Parameter is a command often used in my software. So I tie it into not only a softkey but a toolbar button accessible no matter what softkey group you are in.

    Architecture.

    First get Design Patterns and Refactoring Software, regardless of what langauge you use they will be very useful.

    The goal of Architecture is to have flexibility to meet customer needs without introducing a lot of bugs into your software because you changed something. I am not sure what to call what I use but it builds heavily on Design Patterns.

    Data Structures
    Application Structure
    UI Interface
    Commands/Installable Libraries
    UI Implementation
    Graphic Framework

    Data Structures (Sheets, parts, etc)

    Application Structure (I use an idiom of Jobs comprised of sheets with parts, with a separate Shop Standard that is refered too by all Jobs, and a list of installable libraries ).

    UI Interface (nothing but Interfaces)

    Commands (these use the command pattern to implement )
    Installable Libraries (like reports, part creation, file types, etc)

    UI Implementation (implements the UI interfaces with methods accessing commands and libraries).

    Graphic Framework (Delphi, Qt, KDE, Gnome, VB Forms, etc).

    The reason for UI Interface -> Commands -> UI Implementation is so that commands that just manipulate the UI (switch screens) can be written. The actual implementaion is last because the implementation needs to know what commands are available to assign to various screens and widgets.

    I hope this helps

  38. GOF Design Patterns by jimmyCarter · · Score: 3, Informative

    I guess I am looking for a sort of 'Design Patterns applied to a big deskptop application' sort of discussion.

    Then The GOF Design Patterns may be what you're looking for. The case study used for most of the pattern illustrations is that of designing a word processor -- which is no simple feat. A lot of these can be extended to any type of a UI architecture.

    --

    -- jimmycarter
  39. Your favorite GUI sux0rz by FooBarWidget · · Score: 2, Redundant

    This is the ultimate GUI:

    [foo@izumi bash]$ _

    1. Re:Your favorite GUI sux0rz by susano_otter · · Score: 2

      Bwahahaha! Snerk.

      --

      Any sufficiently well-organized community is indistinguishable from Government.

  40. Fitts's law by golrien · · Score: 3, Informative

    I haven't seen this URL posted yet (I thought it came from Slashdot a while ago, but I guess I was mistaken :) Be sure you can answer all of these questions before you even start to think about GUI design. I agree with pretty much everything the guy says. One other thing, be sure to keep to conventions wherever possible. For example, people are used to having the Exit command at the bottom of the File menu, so (unless you're doing something completely different, as you may be) don't stick it anywhere else. Little things like that make programs more intuitive. And one other thing: make it as unlike Blender as possible :)

  41. Kai's Power Tools? by the_webmaestro · · Score: 2, Informative

    KPT (an Adobe Photoshop plugin) had a revolutionary GUI illustrating some of what you mention. Unfortunately, it wasn't as intuitive as one would hope, but, like anything after using it for a while you get used to it. Somethings actually worked more intuitively than others. Perhaps you should give it a look.

    It was sold by MetaCreations to Corel/ProCreate, and you can get info here:

    http://www.procreate.com/product/kpt/

    Good luck!

  42. A|W, SIGGRAPH by sakusha · · Score: 2

    You should check out the developer docs for Alias|Wavefront Maya, it is the most complex GUI I know of, and their hotmenus and marking menus are totally awesome (and patented so you can't use em, unfortunately). I think there's some docs in there on APIs for the menus and the overall design structure, but there's so much junk in there, I've forgotten.
    You should probably also go through past issues of the SIGGRAPH annuals, there is a ton of GUI discussion in there, albeit scattered around everywhere, sometimes buried in nonGUI-related articles.

  43. create multiple granular controllers by colnago · · Score: 2, Interesting
    Hmmm...I don't know where to see this information documented so I can't point you to a book or website - sorry.

    When implementing semi-complex interfaces, certainly not on the level you require, I've created multiple controllers and not just relied on one. I've placed the controllers at the process level so that not only processes know how to manage and update themselves and their views but they know how to interact with other processes sending messages back and forth for other processes to update themselves and their views. In fact, on a number of projects I've started with a base class ProcessManager and created specialized managers from there.

    I know this is only cursory information. Perhaps it will help you while you think about your direction.

  44. Re:KISS & MISS by sporty · · Score: 2

    I just had a thought about the same thing not too long ago, minus the glove.. I could use a touch screen and manipulate my environment directly, as if everything was paper.

    --

    -
    ping -f 255.255.255.255 # if only

  45. MOD THIS JUNK DOWN by furiousgeorge · · Score: 2

    Interface builder lets you place buttons and assorted widgets in dialogs. It doesn't design software architecture for you.

    Congratulations. You didn't understand the question at all.

    This is like somebody asking "Speilberg makes great movies - how do i learn how to do that?"

    And you reply "get a Panavision camera. Thats what he uses. They're the best."

    A tool is a tool, not a solution.

  46. Re:GUI is Part of an APP but not the whole thing. by MaxVlast · · Score: 3, Informative

    The hell you can't! Have you ever talked to a GUI person about the taskbar? Or the system tray? Or the start menu? Or their filesystem approach? Or the Explorer? Or their common file dialogs? Every place they've had to come up with an idea on their own (i.e., every time they couldn't copy part of Win95 from System 7) they screwed it up.

    --
    There should be a moratorium on the use of the apostrophe.
    Max V.
    NeXTMail/MIME Mail welcome
  47. Architecture Answers by badavis · · Score: 2, Informative

    Check out Martin Fowler's Enterprise Architecture Patterns, some of them can apply to any type of GUI. The MVC pattern does not just have to apply to single components of a window. But there is a difference between creating the GUI architecture for a CAD type program as opposed to a Business type program. For example: CAD programs can have thousands (or more) of objects on the screen at the same time; so modelling each as an object will bring your program to it's knees (using the Prototype pattern can help here).

    You might try searching google for 'CAD GUI' or something similar; I've seen articles / web pages that discuss GUI's that are not database backed / business related, but I don't know the addresses off-hand.

  48. Scalable Application Guidelines by RichieMcMahon · · Score: 2, Informative

    Take a look at the OpenAPI's exposed by great tools such as Borland's JBuilder, JetBrains IDEA, JEdit and Emacs for an idea of how these marvels are built. Common techniques used to produce a product with complex functionality include: 1. A plugin design. It must be possible to "add/register" new functionality without changing features. The core concepts should be small and form a stable core. 2. Observer/MVC pattern (of course). Decouple that sucker... 3. One thing in one place (avoid duplication). If you've a toolbar button, a menu item, a context menu item, and they all invoke the same functionality using the same presentation names, icon, etc - all of these on-screen locations should be contrived from a single source "action" object. 4. Internal languages Use scripting languages to expose common components (both for internal and external consumption) so that they may be reused in unforeseen ways. Good luck...

  49. my 3 cents by xmnemonic · · Score: 2, Informative

    Context sensitive seems to be a significant trend. Macromedia relatively recently revamped their GUI's in their software to make heavy use of a primary context-sensitive panel, allowing them to remove several superfluous panels. Adobe in Photoshop 5 I believe added the context sensitive top bar, which displayed some options for whatever tool was being used. 3ds max is perhaps the piece of software featuring the heaviest usage of context-sensitive interface- the righthand bar automatically displays the relevant tools for what you're working on, i.e. polygon tools if you've selected a polygon object, inverse-kinematics settings if you've selected an IK-related object etc. Context-sensitivity is a great help since it basically does work for you, finding the stuff you need when you need it.

    Right click menus are a major part of the GUI's in Maya (which otherwise has a very poor interface due to the excessive menu switching and poor menu item organization) and 3ds max, with Maya's being its trademark "hot box", displaying tools in a radial fashion and letting users access sub-groups of items just by rolling over them. 3ds max simply displays a whole lot of stuff in its right click menus, plus pretty colors. Right click menus are in my opinion still under-used... I find it incredibly convenient to access stuff in a single level menu accessible through a single click rather than searching through endless menu items, among different menus and different menu sets (in the case of Maya and Softimage, the former even having a menu item search tool).

    One thing to avoid imo is a too linear GUI design. Lightwave features such a thing, in which one must frequently switch between different tabs of different tools depending on the situation. The scapegoat might be that Lightwave has clear and numerous keyboard shortcuts, but that does not alleviate all of the problem. A user should be able to use the software efficiently in whatever way appears intuitive, and not have to suffer learning some specific, somewhat esoteric and assumingly "better" method in order to be the most productive.

    Avoiding that though could lead to redundancy in interface, which is another problem. In 3ds max, there are about 3 ways to create a parametric primitives I believe, cluttering the UI unnecessarily with menus, toolbars and tabs. In many other 3d graphics packages similar situations exist.

    Overall, I would say the best GUI for very complex software would be one which makes extensive use of automation (context-sensitivity), clear unambiguous methods (make the user aware of what the workflow should be, without making it too strict), and simply a direct and clean organization (no superfluous crap, don't display many tools that can't be used at all in the situation).

  50. simplify ruthlessly by rpeppe · · Score: 2
    there are too many highly complex GUIs out there. most of them are unnecessarily complex.

    if you apply Occam's Razor at every opportunity, take every chance you can to cut down on the number of degrees of freedom, eliminate all choices that are not absolutely necessary, you will usually end up with something that is more intuitive, more powerful, easier (= cheaper!) to implement and has fewer bugs to boot.

    in these days of 20 million LOC word processors, and "pile on every feature that we can think of" applications, simplicity is an underrated virtue.

    think minimalist!

  51. I wrote an abstract on this. by Hektor_Troy · · Score: 2

    Well, not quite, but still close enough to qualify I think.

    What I wrote (try to /. Google Groups :-p) was an idea of how to be able to use any computer to interface with any other computer (adhering to my ideas), without having to change your habbits with regards to Window Managers, shortcuts, mouse gestures and so on, wether the computer is running Mac OS X, Windows 3.1, BeOS or if its a CLI only. If correctly implementet, using Wordperfect shortcuts in VI on a system, you've never accesed before should be possible to the extent that VI supports the features, you're trying to access. Heck - if you were patient enough to set it up, you should be able to replace your entire keyboard with a mouse and use gestures for everything including typing. Weird, but possible.

    I know it's a brilliant idea, because the thread on Usenet has total of 8 posts, 1 of which is asking if comp.human-factors is the right group, 2 telling me that it is, 1 is the abstract and four are replys relevant to the abstract.

    Can't beat that kind of feedback, can you?

    --
    We do not live in the 21st century. We live in the 20 second century.
  52. Document/View by wishus · · Score: 2

    You have a document that holds the data, and different views that display the data contained in the document. The document has a defined API that the views can use to find out about the data that the document is storing.

    The document could store the data itself, get it from a database, it does not matter. As far as the views are concerned, they don't know and they don't care. The document itself knows nothing about GUIs or windows, or checkboxes or anything. All it knows is how to find/store its data, and make that data known when a veiw asks for it.

    You need to decide if your application can handle more than one document at a time. If not, you have a SDI (single document interface) application. If so, you have an MDI (multiple document interface) application. MDI is a little more complex, because your application has to know something about how to best organize views of different documents (using tabs, splitters, etc).

    One thing to watch out for - make sure you never store your data in a view. That defeats the whole purpose of the document/view design. The view always gets the data from the document. That way, if you have multiple views on the same document, they are always showing the same data.

    Example: You're making a portfolio tracking application. You have a document that stores all your transactions in some data structure. Then you have multiple views of the same document - a graph view, a spreadsheet view, and a report view. The data is only stored in one place -- the document -- and all 3 of these very different views access the same data from the same document.

  53. Nothing seems to exist for thick clients by znaps · · Score: 2, Interesting

    Most of the replies have focused on web based, thin clients. The poster is talking about thick clients where the user has a lot more functionality than a typical web page.

    He needs answers to questions such as:

    - Do I multithread communications between client and server so that the user can still interact with the UI, or do I use a single threaded model where less things can go wrong?

    - Do any patterns exist for editing data models via the UI and implementing undo/redo ( * see the Memento design pattern)

    - Exception handling: how to manage errors in communication and data and inform the user in an elegant, consistent manner.

    I deal with these issues in my current project - they're pretty common on client side applications, but I haven't been able to find any useful sources to help answer them either.

  54. User Interface Group @ PARC by north.coaster · · Score: 3, Interesting

    Seems like one possible source would be the User Interface Research Group at PARC. These are the same folks who invented the Windowing user interface.

  55. My tip: by j3110 · · Score: 3, Insightful

    about complex GUI's is: don't! :) I still like pov-ray because I can just enter what I want in a text editor rather than a modeler like 3D-S. Several smaller GUI's built for specific purposes would probably be better than one big GUI. Just break the GUI down into easy ways to do specific tasks. Try to have a consistancy among them. Really, this would be a great place to put object-oriented methods to use. Make consistant components that are groups of other UI elements. It's easy to do in Java using interfaces, but you can do it in C++ as well with inheritence and virtual functions, or call-back functions in C(ech!). I'm sure .Net has a sane way to do it(err, no I'm not really... they probably want you to drag components to a form and use cut and paste, but then you have to update every component to fix a bug, add font settings, etc.), but I really don't know. Any GUI architecture worth it's size in bits has some kind of control grouping whether it's OO, or just faking OO.

    --
    Karma Clown
  56. Did you loathe vi before? by Macrobat · · Score: 3, Insightful

    You say you "absolutly loath vi" after having read this book. Did you like it before? Because I find vi to be an excellent editor; it lets me keep my fingers on the keyboard where they belong and gets a lot of work done with relatively few keystrokes. And if you also liked it before reading the book, I would think it's sad to change your opinion just because a book told you so.

    --
    "Hardly used" will not fetch you a better price for your brain.
  57. Check out: Designing from Both Sides of the Screen by pixel.jonah · · Score: 2, Informative

    Designing from Both Sides of the Screen: How Designers and Engineers Can Collaborate to Build Cooperative Technology

    Aimed a bit more towards smaller cooperative apps - but it has a lot of REALLY good things to say.

  58. Also Check out: About Face by pixel.jonah · · Score: 2, Informative

    About Face: The Essentials of User Interface Design by Alan Cooper
    His examples are windows-centric but he has a lot of very important things to say about where modern interfaces go wrong as well as things that are done right.

  59. I am just kidding by Jason+Earl · · Score: 2

    So does this mean I shouldn't get a Panavision camera? I am confused.

  60. what to read by scrytch · · Score: 3, Interesting

    Start by reading every book you can get your hands on about designing user interfaces for the common user.

    Then burn them. In a big roaring bonfire. Okay, don't -- donate them somewhere, but pretend you burned them. Picture 'em burning in your mind.

    You are not designing an interface for the common person. Those are designed to be immediately accessable, with a slow gradual learning curve, with lots of consistent easy to grasp metaphor. That is the mac, and usually they do pretty well at it. Metaphors and graduality will drive your power users insane, and you're designing an app for them.

    You want something more like emacs. Or, if you're doing CAD, you want something more like AutoCAD. You want an interface with power. You want one with usability. You want consistency, you still want to keep things like Fitt's Law in mind, but by no means should you feel compelled to make the damn thing intuitive. Neither vi nor emacs are in the least bit intuitive, but boy are they usable, meaning the interface really squeezes maximum use out of itself.

    If I did have to throw in one piece of pithy advice, I'd say that since you're probably going to have to implement some sort of language to express the actions of the interface in, make the API self-documenting, like emacs. I can't tell you how amazingly useful the apropos command is in emacs, how it just searches through the names and documentation of every function and every var in the system, and I don't have to rely on compiled API documentation that may or may not tell me what I need.

    --
    I've finally had it: until slashdot gets article moderation, I am not coming back.
  61. GUI architectures by tomlord · · Score: 5, Insightful

    It's a shame the post with the correct one word answer got categorized as "funny".

    Emacs is the right programming architecture for GUIs. The Emacs command set and visual appearence are, obviously, not that great for many users -- but the programming architecture is right.

    By being interactively extensible, emacs makes it easy to fine tune an interface while you play with it.

    By being lisp based and by having many fine abstractions, emacs let's you do a lot with very little code.

    The emacs architecture provides some very fine bits and pieces for achieving excellent accessability features.

    By being interactive and self-documenting, Emacs is good at helping people teach themselves to program.

    View-tree toolkits, such as underlie Gnome and KDE are inflexible dogs that leaded to bloated yet feature-anemic tools. You know what they're good for? They're good if you have a command-and-control army of drone programmers who can write reams and reams of code. That's why Microsoft apps will remain far more featureful than their free competition until that competition switches to an architecture that works for a society of free individuals.

    Yes, it's true: the way you structure your programs has political implications. It defines jobs. It defines the power of managers and project managers. It establishes the degrees of freedom your users have to extend or customize their tools.

    1. Re:GUI architectures by Da+VinMan · · Score: 3, Insightful

      Well, I am on very thin ice here, knowledge-wise, but doesn't Autocad do this very thing?

      So, yeah, it's feasible.

      --
      Please mod this post only if you think others should/n't read this. I have enough ego^H^H^Hkarma. Thanks!
  62. Use Cases by jaaron · · Score: 2

    What you're talking about here are often referred to as "Use Cases" under the Rational Unified Process for software development. Basically, the idea is to first think about what the product will be used for and who will use it. This involves at least some simple design of the UI. However, at this point in larger projects, the work is divided between several developers. Usually one or two developers or a small group will work on the User Interface, while other groups work on other logical structures (such as database access, or file system access or graphics processing or whatever). If I'm a developer doing this "back-end" work, then I really shouldn't care about the UI at all. That's up to the UI developers. What I do care about is the interface between the UI and my backend code.

    I believe the original question was about how to design complex software so that this sort of development is possible (whether by a group or an individual). You're correct that good UI code and a proper understanding of the audience is crucial to a polished application. But without properly organizing the coding process, you end up with logic code mixed in with display code that becomes a mess to maintain and upgrade. Using this sort of architecture allows those who do understand good UI and Human Interface Factors the ability to focus on making the application suitable for the audience.

    --
    Who said Freedom was Fair?
    1. Re:Use Cases by cpt+kangarooski · · Score: 3, Interesting

      Sure, but the problem is that the design requirements of even that underlying code will need to be driven by UI demands. If you write a technically sweet filesystem that ignores UI concerns, it will tend to either suck for the user, require even more code to be added in to get it to work usably, or have to be scrapped and redone. E.g. having a filesystem that supports filenames instead of just having inodes that are GUID'd is a filesystem that has been at least in part written to accomodate interface.

      Me, I find UI to be king. No one cares if good code or magical elves are making things work; it has to have a good UI. The best UIs appear to be those crafted by skilled UI designers that outrank the developers; they can give the developers an idea of what they want to be able to do, and let the latter group decide precisely how to best implement the UI group's wishes. They don't have autonomy, though.

      Computers, and software, have to be developed from the outside in, is what it boils down to.

      --
      -- This and all my posts are in the public domain. I am a lawyer. I am not your lawyer, and this is not legal advice.
  63. Rules, rather than patterns by Spy4MS · · Score: 3, Insightful

    I haven't found design patterns to work as well as rule-based coding.

    A philosophy I build into all of my GUI applications is "show the user as much useful information as possible". Users make thousands of decisions a day and informed decisions are easier to make. To that end, I eliminate useless information as much as possible to make room for the good stuff.

    There are simple facts that need to be remembered while designing a UI:
    - eyes move more easily than fingers
    - buttons don't provide useful information (but can!)
    - scrolling is useless and should be avoided
    - minimize clicks, mouse moves and keystrokes
    - informed decisions are better decisions
    - context-based mouse clicks make sense
    - keyboard shortcuts save time
    - don't invent new keystrokes for old functions
    - everything should work as expected
    - file managers should show more files, db apps should show more data
    - people can't choose from more than 7 items unless they are grouped

    BTW There's no such thing as information overload. There's only useless information. If everything you show on a GUI is well organized it's all useful.

  64. MVC as an architectural pattern by dna_(c)(tm)(r) · · Score: 2, Insightful

    I think the MVC concept is mostly interpreted as a simple design pattern. But it is a much older (measured in IT eons) concept than a design pattern.

    MVC is about separating data and behavior (Model) representations (Views) and user input (Controllers).

    It can be applied to command prompt operated programs, batch processed tasks, web apps and GUI's. IMO, the narrow interpretation stems from the use of Observer-Observable-Event implementations of GUI widget libraries (Smalltalk, Java Swing/AWT, MFC, VB,...)

    But MVC can be applied as an architectural pattern to. Implement and identify objects that are conceptual, logical parts of the application. That embody state and behavior. They have to make up the top level 'model'. Every view that is implemented must use the same basic Model, and register different listeners/observers to it or to parts of it.

    The most complicated part is to figure out what kind of event messages to send from the Model (and it's parts) to the registered View(s) and their parts. (the idea of a queue I read in one of the responses seems very good, must try it sometimes)

    Controllers can be unique for each user input source (keyboard, mouse, joystick, drawing tablet...) but when using GUI libraries, a dedicated Controller for each View is probably more natural to implement.

    In this way it is possible to implement very different views on the same Model. Let's take a 3D drawing program. Objects as 'Car' 'WheelFL' 'WheelFR' etc. would be part of the Model. What kind of views can be implemented ?

    1. GUI for drawing 2D x-y
    2. GUI for drawing 2D x-z
    3. GUI for drawing 2D z-y
    4. GUI for drawing 3D x-y-z
    5. reporting view, web based
    6. reporting view pdf
    Each 2D view can represent a wireframe/rendered image constructed from 'WheelFL' in the same application. The pdf tool can be a batch process that opens all drawings and iterates over all of it's objects and creates a pdf with names, coordinates, etc. User input (controller) can be nothing more than a command line argument, or a configuration file, in the last case.

    BTW, I have learned most of this the hard way, but I'm more than ever convinced of the necessity of MVC on different levels (app -> widgets) to make maintainable large (GUI) applications.

    1. Re:MVC as an architectural pattern by ProfessorPuke · · Score: 2
      I think the MVC concept is mostly interpreted as a simple design pattern. But it is a much older (measured in IT eons) concept than a design pattern.

      That's a truism for you!
      ALL "Design Patterns" are restatements of concepts that existed well before the Group of Four began writing. They just assembled them in one place, and created a new (often confusing) vocabulary to use when adding further bits of wisdom to the collection.

  65. My experience is that... by joto · · Score: 2
    ...this is fucking hard!

    The only model I've seen in actual programs, seem to be the "hairy ball of mud". Basically, everything is integrated into the GUI-code, and changing one line somewhere breaks 10 things elsewhere.

    I had high hopes when Tcl/Tk became somewhat popular, because a scripted GUI seems to be the way to go. There was however three reasons it didn't work out in practice. 1: People didn't like Tcl. 2: Interfacing Tcl and C was still too much work. 3: Tk wasn't enough to build a good GUI, and didn't grow fast enough.

    On the other hand, I still believe in separation of concerns. Heavily. I've just spent almost a week(!) hunting for one buffer-overrun in a all-to-large program. The lesson learned: "Don't write large programs" (well, not that I didn't know that in the first place).

    The only place we have somewhat maintainable code for large GUI's at my workplace is where we have written something in small pieces. If you have complex data to manage, make that a separate application. If you need some (or many) ways to interact with it, make it separate applications. If you need to save and restore it, make it separate applications. If you need a GUI to coordinate it all, make it a separate application. This way, you can easily separate responsability of different parts to different people, and you can use simple unit-testing to ensure correctness of each part. And you can replace stuff that doesn't work, and add new stuff without breaking old things easily.

    Secondly, don't build complex interfaces. Keep interfaces down to a minimum. There is a danger in giving each developer their part to play with. And that is, that their overblown egos will quickly assume their part is the most critical, and needs to be the most complex. I've seen interfaces with as much as 60 interface-functions to just get a simple stream of data. It should be four (connect, unconnect, send, receive).

    What should then be your "glue"? Well, I would prefer a scripting language, but as of today, there are still no easy alternatives (they all suck in one way or another). So we use CORBA. It's too complex. It's too easy to be locked into a vendor. But it's here, and it works. If you know of something better, please tell me... (I guess XML-RPC, SOAP, etc... might be an alternative in some cases)

  66. Complex User Interfaces by Type-R · · Score: 2, Funny

    As usual, Dilbert has already solved this problem.

  67. Tasks, Actions, Models, and Views by Anonymous Coward · · Score: 3, Insightful

    I'd actually been searching around for something like this too and havent' found it, so it's been a trial and error thing figuring out a pattern for my app.

    What i've found to work is to use MVC in spirit but split up my application into

    + Tasks
    + Models
    + Controlers
    + Actions
    + Views

    That's supposed to be a tree. This design came out of planning, reviewing the app's purpose, and environment constraints. I am developing my app in java/swing and i took the strengths it had but combined them into higher-level structures to help me make the app more modular.

    Basically,
    Tasks are general tasks that the user will perform. For example, an administrator managing customers of a web store.

    Views represent the actual UI: trees, tables, text areas, fields, etc. Views register with the Tasks for appropriate model change notifications. I can provide a variety of views for my tasks and data, and incorporate tasks into higher tasks with complex views.

    Actions represent the actual actions that a user will perform in that task's domain. for example, in the Administer Customers task, the user can "Delete", "Add", "Search For", "Edit" customers.

    An object for each of these tasks is created and given a string representation, an inconic representation, and it implements the ActionPerformed function. this is taken straight out of swing.
    Actions are then registered into the views and ui elements.
    for example, in my customer manager window i provide a menu, but also buttons across the bottom. So now one action can provide the title of the menu or button text, the icon for the button, and the state for both menu and button.

    finally, when either the item or the button are selected my one action gets the notification.

    The action then trickles the command up into the task where the logic for enabling/disabling ui elements resides.

    The Task then notifies the model (my data) so that proper manipulation can take place. Finally the model notifies the task and the task notifies the uis and actions for appropriate state change (enable disable commands) and view updates (change data in tables, etc.)

    it works pretty well, and i've managed to extend things without having to code complex application state notification or validation so close to the UI. it works nicely in java/swing because up until recently most UI coding had to be done programmatically (didn't use resources like a windows rc) so i can tie UI objects fairly easily to controls. but i'm still not happy with it. however, it was the best i could come up with in a pinch.

    hope this helps. /r

  68. Consider finite state machines by ites · · Score: 2

    Such as that implemented by Libero.
    State machines are very good at handling large numbers of events and treating them in context.
    The biggest different over classic event-driven GUIs is that the UI states - being your different views, perhaps - are well-defined and seperated, unlike a classic CUI in which there is just one big event loop.
    In my experience, using FSM models to define the UI logic (and then turn this into code automatically, like Libero does) makes it easy to build very complex UIs.
    Lastly, I think the problem is the same as faced in many situations, namely that of dominating a complex problem.
    The key technique is to turn the problem into a hierarchy of solutions rather than to handle it as a single large flat issue.
    Abstraction is your friend.

    --
    Sig for sale or rent. One previous user. Inquire within.
  69. Mozilla by zurab · · Score: 2

    I am surprised that almost nobody has mentioned Mozilla. Take a look at the Cross Platform Tk documentation and its architecture. They must have a discussion group as well, search for it.

    Dude, somebody even put out a DOS prompt :)

  70. A view from the trenches: KISS ++ by CodeShark · · Score: 2, Insightful
    Jumping in late here (having a)read all of the posts, and b) having done applications for just about every type of database programming out there in one assignment or another, I think most of the posts are missing a key point: even a fairly complex GUI has to start by "keeping it simple, sir..." (Yes, I know what the fourth word is supposed to be, but hey, I'm in a nice mood today.) In other words, design the GUI by seeking to answer the question, how does a particular class of user get the exact right view of whatever it is he/she/it needs to see with the minimum amount of work? Ideally this should be done for every level of user that will interact with the data, from the lowly data entry folks on up to the CEO.

    Then the second level of the design -- how do I reveal an overview of the complex issues behind the simple display? For example, assume that in an "executive dashboard" type GUI, you have a bar graph showing the status of some part of a mission critical project as "yellow", i.e. may be in trouble but isn't "red" yet. Assume that by clicking in the GUI, the executive can get an overview and that further clicks drill down to the details of why the project is at risk.

    Similarly, maybe the project manager for the component sees a similar dashboard, but instead of the higher level view, it shows the parts of the project, including the critical yello piece. You can progressively use the same type of display for different job functions, and the meaning behind the yellow bar changes, but the GUI doesn't. To the data entry person logging parts into the warehouse, maybe yellow is how he looks for back orders, finds the missing component that the widget group needs, scans it in, and the effect up the chain is to "lower the amount of yellow" because it was the critical piece. The GUI code to make this happen is complex, but the design and analysis make the meanings simple to comprehend.

    The best example I can think of is the heads up display in the later versions of the USAF and USN fighter aircraft -- the pilot's had way to much data to handle, so they simplified the "GUI" and projected to where it could be seen as part of the pilot doing the job without nearly as much effort. The same type of data could then be fed back to the commanders, etc. in displays so that without bothering the pilot "how much fuel do you have left?" they have a heads up that in essence tells them to get the "next set of patrol aircraft ready because Viper needs to come off-station in 20 minutes" -- because Viper two shows up yellow on the commander's head's up display. So The "++" is that if you do the design right, you can eliminate a whole lot of extra (e.g. opportunities for bad) coding and/or business decisions in the systems interfacing between between the executive level and the data entry clerk --or whatever the particular user sets might be.

    --
    ...Open Source isn't the only answer -- but it's almost always a better value than the alternatives...
  71. Some pointers... by iDler · · Score: 2, Informative

    Just a quicky,

    If you're interested in exploring the field of human computer interaction further try the HCI Bibliography. If you're particularly interested in user experience, user interaction, and the "stuff below the iceberg" then take a look at the book "Interaction Design: Beyond Human-Computer Interaction" (ISBN 0-471-49278-7) which has a website. Also the IBM Ease of use site is pretty good.

    Something to whet your appetite!

    --
    iDler seemed like a good name when I used to be bone idle (ie: a student)...

  72. architecture for GUI design by bob_jenkins · · Score: 2

    I think defining an architecture for GUI design should be a matter of finding/writing the right tools.

    HTML is a huge improvement over writing C code for every window individually. Style sheets are a large improvement over using <font> all over the place in HTML. LEX and YACC are improvements over coding parsers by hand.

  73. Check out Rovira Diagrams by crovira · · Score: 2

    Computer Language Magazine, January 1990

    --
    MSBPodcast.com The opinions expressed here are my own. If you don't like 'em... Think up your own stuff.
  74. programming by demonstration by Nick+Mitchell · · Score: 2
    heya, check out Tessa Lau's phd thesis on programming by demonstration. From her site:

    PBD has the potential to make computers easier to use by allowing any user to automate repetitive tasks simply by demonstrating the task on concrete examples.

    (hi tessa!) nick

  75. This is a 3D app; the problems are different by Animats · · Score: 2
    Most of the comments so far ignore the question that was asked - what to do for a 3D application. 3D authoring applications have major user interface problems that have nothing to do with button/menu type GUI issues.

    On the screen, you usually have some arbitrarily complicated 3D scene. Just selecting something can be tough. It might be too small to point to. It might be so big it doesn't fit on screen. It might be behind something else. So you need to be able to pan and zoom, and maybe clip in the Z direction, even during selection. Selection may have to be multistage, where you first indicate the general area and then select a specific item. This tends to lead to a clunky selection paradigm.

    Then there's the problem of specifying what you want to select. Points? Surfaces? Polygons? Objects? Subtrees of objects? Classic Mac-type subject-verb selection becomes a problem here. You need either verb-subject selection, or a palette of selection modes. Both are clunky.

    There's the redraw problem. You can't assume you can redraw the whole scene at a high frame rate; the user may have a really complicated scene. Today, this means level of detail processing; it used to mean manual requests for redraw. Everything has to scale up well. No algorithm can be slower than O(N log N). Getting this wrong drives users with big jobs up the wall, or, typically, to a competitor.

    Maya, Softimage|3D, 3D Studio, Blender, Poser, and AutoCAD all deal with each of these problems, but in entirely different ways. And we haven't even dealt with drawing or animation yet; this is just selection.

  76. MVC is crap?! by Anonymous+Brave+Guy · · Score: 2
    BTW, MVC is crap. It falls down for much smaller problems than what you're looking at.

    Sorry, you've lost me. Every serious bit of UI code I've ever seen insulated the actual presentation to and interaction with the user from the manipulation of the underlying model, rather than interlacing UI code with model management code. Is this, or part of it, what you're objecting to? Or are you perhaps referring to the separation of view and controller, as if it implies that presentation and modification of the data must be independent? Or something else? Could you give an example of these smaller problems where MVC breaks down, and why you think it's inadequate?

    --
    If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
  77. Re:"Re:The gui acid test" - wrong in this case by symbolic · · Score: 2


    I hear this argument so often...that making an interface 'friendly' will render it incapable of meeting the needs of those interested in high productivity. I'd argue that a good interface will meet the needs of BOTH camps, and there's no reason I can see that this can't happen.

  78. Balance Task-Orientation With Data Orientation by Lucas+Membrane · · Score: 2
    It is not always a very powerful design that gives the users views of the data in the system. It may be much more usable to them to match the UI to the tasks that are performed rather than to the ERD of the system. OTOH, if you don't know very much about how the users will work, or if you will have a variety of users who will organize their work in various ways that you don't know much about, then you are better off giving them the data views than giving them badly-designed tasks. If you think that you know the tasks but aren't sure, then give them both the tasks that you think they can use and the atomic operations on the data when they know better than you.

    Look at the works of Michael Jackson, who used to be well-known as the source of 'Jackson Structured Programming' and has more recently looked at workflow issues. With JSP, he explained how there is usually a clash in data structure between input and output, and how the job of programming was to resolve the structure clashes. In the UI case, the clash is between the units of human work that users bring to the machine and the transactions that the computer knows how to process. Use the machine to resolve the clashes; don't make the user do it.

  79. How I Like It by e8johan · · Score: 2

    This is my humble opinion on how to design a good interface:

    1. Define your 'document', i.e. the data you're going to work with as a set of classes.

    2. Define a user interface that lets you access these classes (their methods and properties) when they are relevant.

    3. Make sure to analyse what functions that are going to be used most, make them one, or at worst two-click commands.

    There are a number of ways of showing information to the user. I list a few good ways here, no special order:

    * Show global information in a status area that is globally (read always) visible.

    * Show local information in a special area, so that the options for a line and a box appear in the same place even though they may contain different options.

    * Provide two interfaces for complex operations, one wizard (with an 'don't show this again'-option) and one dialog (possibly with tabs) allowing the advanced user to pick the items that he/she needs.

    * Use context menus (right clickable or automatically appearing in the menu bar).

    * Make frequently used commands (let the user choose, but supply an intelligent default) on a toolbar. Let these buttons simply trigger a standard command, i.e. no extra code here!

    If you have done your document classes right it shouldn't be too hard to add all the inteface classes around them. Perhaps you will have to handle some states in a view, etc. But otherwise it should just be a matter of wrapping the document into something UI like.

    As for tools I must say avoid MFC (i mean *run* if you hear it mentioned, it is not a serious option). The same applies to Borland's alternative (I cannot remember what it is called). If you are forced to write in C, use GTK and perhaps Gnome, but be prepared to write OO code in C, and a huge dependency problem if you use Gnome. Also, portability is not always what it aught to be. If you have the freedom to use C++, use Qt. It is portable, beautifully designed and works flawlessly.

    I must also say that the implementation 'method' I presented above fits very nicely into Qt. I think (haven't tried any big projects with it yet) that it is quite easy to do in GTK too.

  80. Hit upon a big problem by Goonie · · Score: 2
    Unfortunately, some of the more "radical" HCI approaches seem to contradict what's necessary to build reliable software.

    As far as I can tell, many of the prominent HCI researchers argue that you should place the UI at the centre of your design and munge everything else to fit.

    This goes against the common wisdom amongst software developers, particularly in the Un*x world, that you should design the cleanest, simplest, most modular backend possible, and graft a wetware translation module over the top. If you don't do so, you're likely to end up with a nasty, unmaintainable mess, and the bugginess of GUI systems when compared with systems without such complex UI code tends to give credence to such an argument. But if you do it this way, is the UI going to end up compromised? Probably.

    So how do you find a way through this? Evolutionary software models seem to help. Talent and experience tend to assist a bit :) But as for a systematic way to cope with the problems this culture clash raises, I've no idea.

    --

    Any sufficiently advanced technology is indistinguishable from a rigged demo
    --Andy Finkel (J. Klass?)
  81. Congratulations! by Qbertino · · Score: 3, Insightful

    You've brought a rare thing to "Ask /.":
    A good question that can't be answered without advice, that doesn't score a bazillion howto-hits on Google and that isn't shure to be absolutely above the heads of the slashdot crowd.
    Nice to have some good question asked. Thanks.

    Now for my shots at closing in on answers:
    I have no larger mentionable expierience in UI design apart for the fact that I do have some webdesign expierience and a professional artist training, but I have used and operated a wide range of professional tools in the professional manner in which they were meant to be used and operated!!!
    And that's a very important part of my/the answer allready:
    All extremly complex professional GUI-tools each have their very own distinct, standards-pushing look and feel acustomed to their application family more than, let's say, the CUAS. And that's what makes up a good tool.
    People who use Avid use it almost exclusively and for hours and years on end - and often on special hardware too. Same goes for Softimage or Houdini. Or check out the difference between Freehand, Illustrator and Corel Draw. The distinct, special funtionality of vector-drawing apps is approached in a different way by each. That's the same reason why you've got a wider range of Video NLE apps that do all the same but with often different workflow aproaches.
    See what I'm saying: If you're tool is gonna be complex due to very special funtions that only a few people will need or even know, there is no point in trying to find a standard for GUI design. You won't be able to apply it properly.
    What to use? Photoshop layers or Photopaint objects? How to join vectorcurves: Corel connect and combine or Freehand extend and join? The latter is a very good example: 2 totally different but valid approaches to a very important problem. For those that need solid vector graphics power.
    Bottom line:
    Programms that are so complex that they are most likely to become stand alone tools (maybe even with custom hardware!) *can't* follow design standards - because there are none! Such a programm gains recognition by having a distinct character and one team of professionals in it's userfield that really know what they're doing and set up their own set of rules and preferences as to which way the app has to work, behave, look, feel and is intended to be operated.
    And believe me, nothing sucks more than trying to make a complex powerapp like, let's say, a 3D modeler, instantly 'usable' for people who only know office gui standards. Check out kpovmodeler to see what I mean.

    --
    We suffer more in our imagination than in reality. - Seneca
  82. Research Paper on Complex GUIs by noelwelsh · · Score: 2, Interesting

    First off, let me apologise for trying to answer your question, as that doesn't seem to be the done thing around here.

    The paper Advanced Control Flows for Flexible Graphical User Interfaces discusses how to write GUIs that have the same flexibility as web applications (back and forwards motion between states and multiple views of the application). If you have a programming language theory background the technique is continuation-passing style. If that means nothing to you just read the paper :-)

  83. There will never be a speak-interface. by Qbertino · · Score: 2

    Speaking requires something like 80% brain activity. Reading, Pointing, Clicking and single key hitting alltogether only round abouts 20%.
    You can operate a fluid/consitent GUI setup that makes good use of possible short fingermovements (forget that waving about in "Minority Report", it's a dead concept) on mouse and kb and still think deeply on what is just on your mind (your actual work maybe? :-) ) with no sweat.
    There is no way in hell you can do that while talking (or boxing the air).

    --
    We suffer more in our imagination than in reality. - Seneca
    1. Re:There will never be a speak-interface. by jukal · · Score: 2
      > Speaking requires something like 80% brain activity.
      > Reading, Pointing, Clicking and single key hitting alltogether only round abouts 20%.

      yes, I agree. I did not intend to say that "speaking" would be the interface to the system - or atleast not the only interface. Speech can be translated in so many ways. Fortunately, as the idea is in no way concrete, we can leave this open :)) ofcourse, as it is sci-fi, the interface in our imagination could be considered to be the de-facto Spinal Tap [tm].

  84. Re:Anything by Alan Cooper: Offtopic? by Krelnik · · Score: 2
    I wasn't going to say anything about it, but I was wondering the same thing. It very quickly got 1 each of "Insightful", "Interesting" and "Informative" all within about 10 minutes of when I posted it.

    Then about 2 1/2 hours later, somebody came in and modded it down one as Offtopic. I have no idea why.

    It does point out a bug (IMHO) in the moderation system. You can get 4 or 5 mods up, but if somebody wants to come in at the end and declare "troll" or "offtopic" then thats the word that gets pasted on the end of your moderation total. Of course its still scored 4 so its very visible, but I wonder how many folks see "Offtopic" and skip, regardless of score. Always taking the last choice as the name doesn't make sense.

    Ironically, this post is technically offtopic.

  85. Re:"Re:The gui acid test" - wrong in this case-II by symbolic · · Score: 2


    Not hard at all...I'll just use its own scripting language to create something simple that even she can understand: A button to create a ball, one to create a cube, one to create a checkerboard pattern, and one to render. Presto.

    If you're talking about making the art of 3D production easy to learn, it isn't going to happen - at least for a while.

  86. Mediator Pattern: AKA Visual Basic by Latent+Heat · · Score: 2
    The Mediator Pattern is pretty much the one note on the piano keyboard that Visual Basic plays.

    You have a main form, and you have widgets, and widgets are pretty much only able to fire events that notify the main form -- the main form is the mediator. So if you want to link a bunch of widgets together, they cannot talk directly but have to signal their main form (mediator) by firing events, and the main form has to sort out which widgets need to be updated in response. So the main form acquires this blob of spaghetti code that ties all the widgets together.

    There are instances when you want widgets to be in an observer/observable relationship -- to communicate with each other and sort out their differences without telling Mom (i.e. the main form mediator). VB makes this difficult to do. Delphi/C++ Builder allow this to be done -- one widget can have a reference to another widget as a property to set up and observer relation, although not many widgets use this capability. The Anders Hejlsberg-influenced C#/Visual Studio .NET also has this capability.

    You may say, why the whole purpose of mediator is to avoid a rat's nest of multiple observer relationships among a network of widgets. Yes, and the whole purpose of giving employees a supervisor is that expecting a company to run on an ad-hoc network of relationships without the ability to get direction from a boss is the same thing. On the other hand, if the boss is the pure mediator pattern, the boss is overwhelmed by employee queries and the boss will wish that the employees could talk to each other and not involve the boss in every last decision.