which of the following styles do you prefer?
An application which to perform tasks opens new forms
An application which keeps the various "forms" in different tabs
An application which is based on a PageControl and shows you the right tab depending on what you want to do.
Something else
Also do you have any good links for gui design?
From a programmers point of view, the PageControl solution quickly gets out of hand. Possibly too much code and certainly to many components on one form. (Originally this question was tagged Delphi, so I go from there.)
From a users point of view, the "opens new window" paradigm often is confusing. We people tend to think that we are able to multitask and handle many open windows and tasks, but we are not (we task switch at a loss of time like computers and add loss of accuracy).
Obviously this really depends on the type of application. But I would tend to a paradigm as Chrome and Firefox show in their latest incarnations:
keep the various forms in different tabs
let the user detach a tab into its own form (dock and undock via drag%drop)
add a good way of navigation
I implement something like an SDI as main screen of an application too. Look at something like "outlook style". Navigation, list of objects, object details in different panes, some additional panes like a cockpit. And then open a new window/form for certain tasks (some modal, some non modal), but short lived. After the email is written, it is sent and closes the window. But I have, if I am capable of doing so, the possibility to work on multiple emails at the time.
Look at the problem. If it has dashboard character, take "outlook style" or so. If the users are a wide spread, heterogeneous, non computer savvy crowd, use SDI or forms on tabs. If you write for programmers, you might go for multiple forms, just because we tend to think that we can handle it. And it works for multiple screens (hopefully).
MDI is the worst choice possible, in my opinion. There's nothing I hate more than having to resize a bunch of windows, or tile them or whatever.
Tabs are bad, too, especially if you have more than one row of them (or if you have one row but still have more tabs than will fit, and have to use some funky scrollbar or "more" button with them).
I would rather see the programmer think about the problem and just show me what I need to see based on what I'm doing as a user. Implementing the different user interfaces in your programs as user controls (as opposed to discrete forms) and then showing them or hiding them based on the current context is the way to go.
The Tabbed form is a good idea if you use a frame for each tab content. This keeps you out of trouble from getting too much code in one single form unit. Try to do the same as Google Chrome. I personally create a menu with the options that are actually frames that loads only when the user asks for it, so there will never be many tabs visible unless the user needs them all opened.
Related
I am new to windows phone (WP7) and to me it looks like everything on WP7 is about pages. I want a small window to pop up from the bottom of a page while staying on the same page. The small window will have some controls (like slider, list etc.). It should not behave like a modal dialog box though, i.e. the rest of the page (which is not covered by the small window) should still be active and user should be able to do something there. And I want to have a separate C# class which will handle the events from the controls on the small window.
This is very easy on iPhone, using view controllers, is there something similar on windows phone?
It sounds that it would make sense to make your "pop up" part of the page with the content it is intended to manipulate content on that page. If you want to encapsulate the functionality of the "pop up" you could make it a UserControl. If you went this route then animating it to slide onto the screen will be straightforward.
Windows Phone 7 typically uses an MVVM model compared to iPhone's MVC one for app structure. The direct comparison therefore isn't appropriate. WP7 also uses a very different design language to that of the iPhone and so a straight port of application design and layout is also unlikely to create a great experience on WP7.
I'd recommend taking some time to understanding the differences in the platforms and how your existing design would be best suited to recreation on WP7. Not only will this help you create a better experience on WP7 but enable to see if this your question actually relates to something you should be doing or not.
This very much sounds like something that goes against the nature of the platform, and the general design guidelines.
If you're providing some available configuration options to the user, you should do it on a separate page, so the user can change the settings there, approve it, and then be navigated back to the previous page.
However, if you really want to, you're talking about displaying a UserControl inside a Popup. But it wouldn't be a very good user experience, and confuse most users, as it doesn't follow the same look&feel as the rest of the platform.
Is there a way to create a wizard-like window in SketchFlow 4?
it needs the standard prev/next buttons, and of course the "Finish" button on the last page.
Are you having problems creating that? Sounds like a straightforward use of the prototyping features in SketchFlow. Simply link the sequence of screens together and use buttons with navigation behaviors to navigate between the screens.
I'm doing the same thing right now. We came at it two different ways - up to you which you prefer.
One is to use a TabControl and use the tabs as the steps of the wizard. This means you don't have to deal with adding the nav links back and forth, but you might have trouble getting the look you're hoping for.
The other way, as Chuck mentions, is just to essentially clone each step of the wizard screen as its own individual SketchFlow screen, with just the content section changed. Then you can link up each screen with the navigation hooks in the SketchFlow Map.
The latter is certainly more customizable, and once you get the hang of how to reuse sections of your design, tends to work better.
There is no questions: UI-First Software Development. But what does it takes to do the UI first?
I started to build a website, a complicated one, and know I start to concern about the UI. Instead to start coding html+css, I decided to start with SkecthFlow. now, I'm very confused. Do I want to build a exact sketch? meaning to think about colors, fonts make sure that the button will look like a web link... etc, or just build the application sketch flow? meaning put a textboxes and buttons. Do I need to implement every thing in SketchFlow first?
I'm looking for best practice.
When I am doing wireframes, the goal is to NOT have the user/reviewer worry about colors/fonts/etc. but rather to have them focus on the details of the UI workflow/screen flow and specific types of controls they want to use. Even placement of the controls is secondary unless it impacts usability.
That's why SketchFlow comes with the style set that has the UI look like hand-drawn black and white chalkboard drawings.
Many non-programmers (and some programmers too) get hung up on colors, fonts and graphic design, which can suck up a bunch of time early in a project. All of that can easily be done later, when the functionality is all decided upon and in development.
I'm from a Windows programming background when writing tools, but have been programming using Carbon and Cocoa for the past year. I have introduced myself to Mac by, I admit it, hiding from UI programming. I've been basically wapping my OpenGL code in a view, then staying in my comfort zone using my platform agnostic OpenGL C++ code as usual.
However, now I want to start porting one of my more sophisticated applications to Mac OS.
Typically I use the standard Visual Studio dockable MDI approach, which is excellent, but very Windows-like. From using a Mac primarily now for a while, I don't tend to see this sort of method used for Mac UIs. Even Xcode doesn't support the idea of drag and drop/dockable views, unfortunately. I see docked views with splitter panels, but that's about it.
The closest thing I've seen to the Visual Studio approach is Photoshop CS4, which is pretty nice.
So what is the general consensus on this? Is there are more Mac-like way of achieving the same thing that I haven't seen? If not, I'm happy to write a window manager in Cocoa myself, so that I can finally delve in an learn what looks like an excellent API.
Note, I don't want to use QT or any other cross-platform libraries. The whole point is that I want to make a Mac app look like a Mac app, leave the Windows app looking like a Windows app. I always find the cross-platform libraries tend to lose this effect, and when I see a native Mac UI, with fancy Cocoa transitions and animations, I always smile. It's also a good excuse for me to learn Cocoa.
That being said, if there is an Open Source Cocoa library to do this, I'd love to know about it! I'd love to see how someone else achieves this, and would help smooth the Cocoa learning curve.
Cheers,
Shane
UPDATE: I forgot to mention a critical point. I support plugins, which can have their own UI to display various plugin specific information. I don't know which plugins will be loaded and I don't know where their UI will live, if I don't support docking. I'd love to hear people's thoughts on this, specifically: How do I support a plugin view architecture, if the UI can't change? Where do I put the plugin views?
Coming from a Windows background, you feel the need to have docking windows, but is it really essential to the app? Apple's philosophy (in my opinion) is that the designer knows better than the user how things should look and work. For example, iTunes is a pretty sophisticated app, but it doesn't let you change the UI around, change the skin, etc., because Apple wants to keep it consistent. They offer the full view, the mini player, and a handful of different viewing options, but they don't let you pull the source list off into a separate window, or dock it in other positions. They think it should be on the left, so there it stays...
You said you "want to make a Mac app look like a Mac app", and as you pointed out, Mac apps don't tend to have docking windows. Therefore, implementing your own docking windows is probably a step in the wrong direction ;)
+1 to Ken's answer.
From a user perspective unless its integral to the app like it is in Adobe CS or Eclipse i want everything as concise as possible and all the different options and displays out of my way so i can focus on the document.
I think you will find with mac users that those who have the "user skill" to make use of rearranging panels will in most cases opt for hot key bindings instead, and those who dont have that level of "skill" youre just going to confuse.
I would recommend keeping it as simple as possible.
One thing that's common among many Mac apps is the ability to hide all the chrome and focus on your content. That's the point behind the "tic tac" toolbar control in the top right corner of many windows. A serious weakness of many docking UIs is that they expect you to have the window take up most of the screen, because the docked panels can obscure content. Even if docked panels are collapsable, the space left by them is often just wasted and filled with white space. So, if you build a docking panel into your interface, you should expect it to be visible most of the time. For example, iTunes' source list is clearly designed to be visible all the time, but you can double-click a playlist to open it in a new window.
To get used to the range of Mac controls, I'd suggest you try doing some serious work with some apps that don't have a cross-platform UI; for example, the iWork apps, Interface Builder or Preview. Take note of where controls appear and why—in toolbars, in bottom bars, in inspectors, in source lists/sidebars, in panels such as IB's Library or the Font and Color panels, in contextual HUDs. Don't forget the menu bar either. Get an idea of the feel of controls—their responsiveness, modality, sizing, grouping and consistency. Try to develop some taste—not everything is perfect; just try iCal if you want to have something to make fun of.
Note that there's no "one size fits all" for controls, which can be an issue with docking UIs. It's important to think about workflow: how commonly used the control would be, whether you can replace it with direct manipulation, whether a visible indication of its state is necessary, whether it's operable from the keyboard and mouse where appropriate, and so forth. Figure out how the control's placement and behavior lets the user work more efficiently.
As a simple example of example of a good versus bad control placement and behavior in otherwise-decent applications, compare image masking in OmniGraffle and Keynote. In OmniGraffle, this uses the Image inspector where you have to first click on an unlabeled button ("Natural size") in order to enable the appropriate controls, then adjust size and position away in a low-fidelity fashion with an image thumbnail or by typing percentages into fields. Trying to resize the frame directly behaves in a bizarre and counterintuitive fashion.
In Keynote, masking starts with a sensibly named menu item or toolbar item, uses a HUD which pops up the instant you click on a masked image and allows for direct manipulation including a sensible display of the extent of the image you're masking. While you're dragging a masked image around, it even follows the guides. Advanced users can ignore the HUD entirely, just double-clicking the image to toggle mask editing and using the handles for sizing. It should be easy to see, with a few caveats (e.g. the state of "Edit Mask" mode should be visible in the HUD rather than just from the image; the outer border of the image you're masking should be more effectively used) Keynote is substantially better at this, in part because it doesn't use an inspector.
That said, if you do have a huge number of options and the standard tabbed inspector layout doesn't work for you, check out the Omni Group's OmniInspector framework. Try to use it for good, and hopefully you'll figure out how to obsess over UI as much as you do over graphics now :-)
(running in slow motion, reaching out in panic) Nnnnnoooooooo!!!!!
:-) Seriously, as I mentioned in reply to Ken's excellent answer, trying to force a "Windowsism" on an OS X UI is definitely a bad idea. In my opinion, the biggest problem with Windows UI is third-party developers inventing new and inconsistent ways of presenting UI, rather than being consistent and following established conventions. To a Mac user, that's the sign of a terrible application. It's that way for a reason.
I encourage you to rethink your UI app's implementation from the ground up with the Mac OS in mind. If you've done your job well, the architecture and model (sans platform-specific implementation) should clearly translate to any platform.
In terms of UI, you've been using a Mac for a year, so you should have a pretty good idea of "the norm". If you have doubts, it's best to post a question specifically detailing what you need to present and your thoughts on how you might do it (or asking how if you have no idea).
Just don't whack your app with the ugly stick by forcing it to behave as if it were running in Windows when it's clearly not. That's the kiss of death for an app to Mac users.
I've noticed recently that it seems to be a trend in Windows applications to no longer include the menu bar in an application (the "File Edit ..." menu), instead having the functionality linked to icons seemingly randomly spread around the application window.
for example: IE8, Windows 7 media player.
Is there any usability evidence driving this change? (I, personally, find these apps really hard to use)
If so, can someone suggest where I might find this research and perhaps some guidelines for writing new applications using this style?
Some answers have suggested that it's the "Ribbon" style, which appears to be what I'm looking at. I'm still having trouble finding guidelines or evidence of what works/doesn't work.
The MS Office Ribbon perhaps inspired the latest slew of apps that use multiple icons without text labels in lieu of a menu bar. However, the implementation of these apps apparently failed to understand or realize the advantages of the Ribbon or even what makes a Ribbon a Ribbon.
Controls labeled with icons alone are more difficult to learn than those labeled with text alone [See Wiedenbeck S (1999). The use of icons and labels in an end user application program: an empirical study of learning and retention. Behaviour & Information Technology, 18(2)]. The lack of text labels for groups of controls in these apps can’t help.
Note that the Office Ribbon generally avoids both of these pitfalls by providing text labels for groups of controls (the Office Logo being a notable exception) and text labels for most individual controls (many controls on the Home tab being another notable exception).
After being subject to much research, the Office Ribbon largely preserved the traditional File-Edit-View arrangement of commands found the traditional menu bar. There’s no evidence that there’s anything wrong with this organization.
IMO, icon-scattered UI designs represent a fashion or branding statement, a rather clumsy attempt to appear “state-of-the-art” like Office, and an excuse to decorate the UI with graphics. They are not a usability improvement.
For everything about the Ribbon, see Jensen Harris’s blog.
My critique of the Ribbon. Not that I'm particularly satisfied with the traditional menu bar and tool bar.
It is ribbon. Presumably it is easier to use than the standard menu because it is context dependent. The whole purpose of developing it was that despite the fact Word can do almost anything now, people were complaining it is missing some features just because they couldn't find them. So MS people were thinking hard and ribbon is what they created. Being context dependent it shows you the features you might use right now, not all the features and it saves screen estate so more features actually visible to the user.
Well, after a quick search I found a reasonable explanation of this UI trend. It is based on the Ribbon concept. It traces back from Office 2007 and even Firefox is using it.
References:
http://www.pcpro.co.uk/news/351808/firefox-tidies-up-with-office-2007s-ribbon
http://slashdot.org/story/09/09/23/1846248/Firefox-To-Replace-Menus-Wi
https://wiki.mozilla.org/Firefox/Sprints/Windows_Theme_Revamp/Direction_and_Feedback
http://en.wikipedia.org/wiki/Ribbon_(computing)
The ribbon still serves as a navigation area - a combination of a menubar and toolbar that tends to be organized by area (Print, Design, Layout, External Data) rather than traditional style (File, Edit, Tools). While it does take a bit of getting used to things being organized by area, it certainly adds to the usability.
I think the reason IE 8 integrates the menu bar into the same line as the tab is to allow for more viewing real estate (or junky toolbar add-ons). A ribbon would be overkill for something as simple as a browser where 99% of the time you do one of 3 things: Enter a URL, Go to Bookmarks/Favorites, or Print.
If you are writing a Windows-based database system or other complex application, definitely checkout how Microsoft utilizes the ribbons throughout its Office products.
The "ribbon" is nothing more than a FAT toolbar. Such things are getting invented, not because of user request or need, but because of the arrogance of large corporations and bored, rich managers and "developers" sitting around with nothing to do. "Inventing" things is one thing, but FORCING it on everyone w/o preserving the previous, non-cluttered, classic, working, familiar interface is absolute arrogance. People need to be informed. You don't have to put up with it. Say something.