I've done plenty of programming before for CLI and the web, however recently I am getting into desktop GUI programming.
Most of the tutorials for GUI programming I found just explain the different controls you can use and leave it at that. Some of the better ones also skim over a few usability issues.
However, my problem is not with the APIs, or the theory but with my code.
How are you supposed to organise different views your application might have (e.g. a IM application has a login view, a contacts list view, a conversation view etc.).
Are these supposed to be different classes or different methods on one class?
Different panels that are hidden and revealed, or different windows altogether?
I'm hoping for answers as language agnostic as possible, but in case that's not possible, the languages/frameworks I am considering are Java/Swing or C#/WPF. However, if there's another language/framework that is significantly better for learning from, I would consider using that.
Normally each view will be a seperate class in a seperate file. The class will then most likely implement some base class like Window or Control.
As far as organization, if it's a simple app, put them in the root or in a UI folder. Or perhaps a Window folder and Controls folder.
If it's a large app with several views, than break them out into functionality, i.e. an IM folder.
I would say go with what Joshua said and as far as using different panels that are hidden and revealed, i've worked on old code and it's a nightmare to re-use (8000+ lines of Delphi 6!) so stick with different windows as much as possible!
The generally recommended overall structure of the program is the model-view-controller (MVC) type of structure. So, first off, don't make the actual data part of the views, it goes into the model. From here, since the only data in each view window is now almost entirely just layout information and what to do on an action (click, data display, etc), if these are different, they should probably be different classes. If there's some general functionality that can be factored out, you can make this a base class and inherit from it, but in the end, windows with different functionalities should be different classes.
If you are going to be using one of the mainstream IDEs it will handle some of this work for you. The default will be a different class for each form. Hidden panels and tabbed interfaces are nice features but do yourself a favor and learn the ins and outs of embedding groups of controls into form. Some frameworks allow you to directly embed one form into another. Others have special containers that can be be embedded.
The point of these is to break up your functionality so you don't wind up with a bloated form class that's difficult to wade through.
I would also spend some time looking at some of the architectural patterns for keeping your business logic separate from your UI. Check out this link for a good starting point.
Related
I currently have 3 very similar, but slightly different mfc applications, which would normally be opened at the same time as part of their workflow and usage in a Windows environment. I would like to keep them as 3 separate applications, but somehow group them together, under a single UI container to provide more clarity to the user.
I've so far considered using named pipes to send data from two of the applications to the third, the latter one being solely responsible for drawing the GUI (possibly having 3 different tabs at the highest GUI level, one for each application). I got this idea from SergeWautier's answer from this post. After looking into the possibility of doing this, there seems to be a lot of work involved in achieving this.
Is there any other (possibly simpler) way of achieving something similar?
Old answer
I have in the mean time come across the TaskSpace tool, which is the closest thing to what I'm looking for. It's liteware and getting the full functionality (e.g. saving a particular tabbing configuration, which I am most interested in) requires purchasing a licence. What would be really cool would be to restrict the user from adding any other windows apart from the 3 applications and have better control over the titles of the tabs & top-level window. At this point, writing a similar tool to TaskSpace would be the ideal solution.
I've also been playing around with tidytabs. It's not exactly what I want, because it doesn't provide a 'wrapper GUI', but I thought it's worth mentioning here in case it helps someone else.
Update
I've found exactly what I was looking for in Window Tabifier, which is open source and I can modify to fit my needs in accordance with the CPOL Licence provided. Very nicely written code too.
if the user press the button, handling this event should put on controller or event? Thanks.
It really depends of the platform you are working on, because there are huge differences with desktop development (like .NET's WinForms / WPF or Java's Swing versus ASP.NET and Java Servlets or PHP, for example).
In desktop programming the event system makes it really easy (and sometimes even natural, depending how you look at it) to do a lot of the work in the event itself, but eventually you'll find yourself coding A LOT of the program's logic there, making your view a mess. In web programming this is harder to do because you can't really to much of the system logic in the browser (you can't open a connection to the database, you don't have access to the session or any other kind of information that wasn't previously make available by the server).
Also, it is much easier to apply MVC in Web development because of the nature of how the requests and responses work. On the other hand, when programming to Desktop everything is right there at your need, you can easily access any control from probably everywhere, and even if you don't, you will think it is OK (even when it's not) to share things using static variables (or a lot of singletons).
To make a long story short, I'd say that you should make all necessary efforts to resume logic programmin in the events as possible. With some practice, you will discover that delegating the logic to a regular object instead of the view itself will make your life easier in the long shot.
In time: the kind of controller that you use could be important too. For example, ASP.NET uses some kind of Page Controller, while many PHP and Java frameworks are more kind to use a FrontController (it's not a rule of course, but can make a difference of how you see things).
I've started tinkering with webOS and it's pretty cool. Out of all the major smartphone platforms I have to say that webOS is the easiest to work with. Currently I'm just trying to get an intuitive sense for the framework and I'm just tinkering with basic stuff like event handling, pushing and popping scenes, etc. This has gotten me far but I'm getting to the point where my applications need a little more modularity since they no longer logically fit on a single stage with multiple scenes. I would like to know how do I go about writing my own assistants and controllers and using them in my code?
Are you using Eclipse with the plug in installed?
Even if not, just copy a basic controller and change around the class names everywhere you see it.
Say HomeController to PreferencesController
Add that preferencescontroller.js to your sources.json file and add a folder in the views called preferences with a file in there preferences_scene.html (I believe).
Since the current framework is MVC, you may also want to think about creating javascript models that would house your validation and even helper files that could be global or view specific. None of this is truly enforced except through your own doing though.
Also, beyond that, in 5 days HP will have a conference that shows off their new devices and possibly even their new modular framework titled Enyo, so that may be more what you are hoping for.
I work in a small and young team of developers and we have problems that we are not sure how to solve.
On previous projects every developer have been working on tasks that were based on use cases. So, upon setting the system architecture, each team member worked on user interface and business logic of tasks assigned to him.
This kind of organization gave us the problems with UI. Each developer had his own logic about how UI should look like, where buttons should be, etc etc... and even if we've had one css designer a lot of refactoring had to be done in order to make web site to look compactly.
How do you deal with this issue?
Do you split tasks based on layer, not on whole use case?
Do you use some technical solution to achieve this or is it just written standard that every developer need to follow?
Thanks
Everyone has their own style and it would be difficult and a waste of time to define a standard that would get everyone to draw the UI in a consistent manner. Instead, elect your best UI designer to do what he does best and design the UI for the whole system. Funneling all UI changes through the designer would be difficult so just let your developers "mess it up" as they implement new use cases and just have your designer clean it up before the release. It shouldn't be hard for him/her to rearrange the existing forms and bring some consistency back to the UI.
I've found this 12 Standard Screen Patterns article very useful.
A solution might be to create sketches of all screens of your application, have them reviewed by an ergonomy-expert to correct the biggest mistakes, and, only then, give them to your developpers.
This way, they would know how the screens they are developping should look like -- there will still be a couple of differences in the end, but those should not be "big differences", and should be eaiser to fix.
And this would mean not each developper has to imagine what the perfect screen would look like : each one of those would be coherent with the others.
Adopt the tried and tested MVC system, let the view be decoupled from the business logic. Then ask a UI designer to produce sketches and work to that. UI's are something best done top-down from my experience. The user gets an overall view before being presented with all the details, defining and capturing this hierarchy makes good UI's. Coding of business logic is done as you mentioned on a use-case basis, mostly bottom-up and this is where the code falls out of sync with the UI.
Designate one person (preferably someone with graphic design experience, even if they're not really a programmer) and give them the authority to make cosmetic changes to all forms, pages and controls at any time, and have them be responsible for the overall look and feel of the application.
As far as metrics go, keep track of how much time this one person has to spend "fixing" each programmer's work, and make sure the programmers are aware of these numbers. The idea is to encourage them to make their stuff look like it should from the beginning, but also not to do weird things based on what they think stuff should look like. I've had to spend more time undoing my coworkers' bizarre design choices than anything else.
Don't be afraid to have outside sources review the design work of each programmer. It's very common for programmers to 1) produce horrible-looking UIs, and 2) believe the UIs look fantastic. You should do what the Army does with boot camp: break them down completely right from the start, so that you can build them back up again the right way.
Part of the problem with creating your own written standard is that while well meaning, there could be mistakes or better ways to do things than what's been standardized. For example, where I work, the standardized cancel button does nothing when you click on it (it's been wired to Reset).
Instead, I recommend choosing existing standards, such as The Macintosh Human Interface Guidelines or Windows User Experience Interaction Guidelines. Even if the standard is wrong, it's rarely profitable to deviate from widely established conventions.
Then pick up some good books for the developers, such as "Designing Interfaces: Patterns for Effective Interaction Design". Good user interface design is partially a matter of good taste, and while not every developer will be interested in the subject, it's in your best interest to help them improve.
Next, empower your QA team to file bugs when the interface for one product is inconsistent with another. The developer can then either standardize or justify the deviation if he has a reason. We do this; it works pretty well.
Lastly, go over your existing products and get a consensus on how their interfaces should be unified. Bring in (and keep) a usability expert if you can. I've seen good ones do amazing work.
There really is no clear solution for how to deal with UI problems. There are however several approaches one can take to combat the problem of having things become too complicated:
Use cases are usually cross disciplinary in nature, thus the responsibility to get a use case done should be split between the people who can implement it properly. Programmer and designer type of people need to cooperate.
Everyone in the team needs to keep in mind seperation of concerns, i.e. things that can be seperated must be kept that way preferably as early as possible. There are so many ways to do this: e.g. apply MVC pattern in your project (which is a very wide way to put it). Presentation and logic should be seperate so that changes in one layer should not affect the other.
Someone needs to be responsible for the overall UI design so it is consistent throughout the application. Preferably someone who is both a graphic designer and has some insight in usability. UI design is something that needs to be planned along with the use cases and revised constantly as development goes on. Consistent UI is very important and developers need to be on board on it.
I'm a software developer, and I'm going onto a project now that involves implementing a website using ASP.NET (3.5 / 2008, using the Web Client Software Factory). I've been tasked at creating a UI / UX Design Document for the project, however I don't really know where to start.
I've been on one project in 3 years where there was a formal UI design document, which included layout and style guidelines/rules (e.g. the application has a header, navigation, etc., links must be colour A, buttons for positive actions must be on the right, etc. etc.). It was pretty useful in hindsight, I appreciated that someone went into that much effort too - even defining the CSS classes in the document. However, the doc was based on an existing application and conformed to the business' overall corporate identity.
The current project is a new project, which at the moment doesn't have clearly defined requirements (yes, I know... how do you design when there aren't many requirements... I digress). It is hard to know what functionality exactly will be needed. There are two different user types / personas, but no formal research will be performed on them for this document. Also, I'm not sure of the corporate identity, apart from that the business has some rules regarding use of their logo, which I'll only get further clarification on in a few days time.
So I'm slightly in the dark, throwing paint at a canvas, hoping I get a pretty picture at the end (if only I were Jackson Pollock).
What would you include in this document? It is aimed at the business (the client), as well as the developers. I can think of only the below:
Layout - header, footer, content, navigation
Styles - colour palette and styles of the different expected components
User Interactions - when a user performs an action and must wait they are notified by a modal dialog, validation is done using AJAX, navigation should be contextual, tasks should be performed with a minimum amount of clicking / navigation, etc. etc.
Has anyone got any experience in creating such a document, or any known, tried and tested process for UI design?
Thanks,
James
There' all sorts of elements that could be included in such a set of documentation:
visual style guidelines (colors, typefaces, sizes, icons, etc)
branding guidelines (corporate logos, colors, messaging, etc.)
copyrighting style guide (terminology, proper messaging, proper voice, etc.)
persona/demographic targetting
page layout guidelines
CSS guidelines/standards
JS guidelines/standards
use cases
accessibility issues
usability issues
example implementations
IA path flows
Wireframe components
etc.
I'd pick up this book if you can to give you a start on thinking about this:
http://www.amazon.com/Web-Anatomy-Interaction-Frameworks-ebook/dp/B002ZY5FCW/ref=sr_1_2?ie=UTF8&s=books&qid=1262983955&sr=8-2
Along with all the other obvious components of your planning document, it would be a good idea to sketch portions of the UI along with an accompanying narrative of the specific use cases illustrated.
I've had issues in the past when attempting to communicate UI ideas. It is often useful to make sketches of dialog boxes and sequences of actions. If those sketches look too "real", then there is a tendency for them to become the spec for the final product.
To mitigate this, I've been playing with Balsamiq Mockups. It has the nice property that it is an editable back of a napkin, and deliberately renders all objects and screen layouts with a hand-drawn feel. I like the results I've achieved with it for small, internal projects. I haven't (yet) had the chance to use it for a large project with many external stakeholders.
The Wikipedia article for Human Interface Guidlines has some great links that I was going to suggest. Some of them may have far more information than you require, but they should give you a good idea as to what types of things you should add.
I have always found Apple's guidelines very complete and useful, but they are definitely very complete and require a lot of reading.
UX documentation is a critical part of the UX design procedure. It functions as a connection, providing context to the product’s lifespan from the initial concept to the present iteration.
Good UX documentation is straightforward yet lean. It should be favorably attentive, actionable, and purposeful. UX documentation is a functional document of a product’s journey from the beginning to the current release. This documentation is important for several reasons:
Organizational memory
Onboarding & handovers
Single source of truth
Fosters better communication & collaboration
A valuable R&D and IP