Visit my site @ mugunthkumar.com


Tags » ‘microsoft’

Save As vs Exporting – Why Apple excels at UI Design?

January 13th, 2010 by Mugunth Kumar

Most users think, Mac UI is all about slick graphics and “cool” icons. Well, that might be true partially, but user interface design isn’t about photoshopping or designing cool looking icons. According to Jakob Nielsen, aesthetics is just one aspect of usability. There is much more to user friendly software than just the “cool factor” or great icons.

Recently, I was using Microsoft’s Excel to edit a dozen large  CSV files. As a matter of fact, in Excel,  whenever you save “anything” you do as a CSV,  you will practically lose out features that aren’t supported natively by the underlying file format. For Example, CSV doesn’t support coloured cells. So when you colour a cell, and try to “save” it as a CSV, Excel pops up this dialog.

Saving as CSV loses of "certain" features


When you click “Yes”, all that Excel does is to “export” whatever content your file has into what the underlying format can support. So since, excel supports coloured cells but CSV doesn’t it ignores your colouring and proceeds saving it to CSV. Excel even goes one step far and doesn’t clear the “dirty flag” because, Excel hasn’t saved *every* change you made into the CSV.

Sounds good so far. But what’s really wrong here? The real problem is, Excel gives you a sense of feel that “everything” have been saved and you are safe. Things become bad when you quit Excel. Because the dirty flag isn’t cleared and the file haven’t been saved completely, Excel prompts you to “save” the file again. Specious, not wanting to take chances, some users like me, save the file again. Again the same thing happens and the end user is still just dumbfounded and asks, But, why the heck should I save it again?

Microsoft UI designers have failed to understand the end users. In this case, it’s because Excel fails to speak the users’ lingo. According to the user, when he “saves” a file, he saves a copy and he is contended that he can always re-open when something bad happens. But excel just “exports” the file into CSV format and tells the user that it “saved” the file (when it in fact didn’t). As a result what happens is data loss. No not just cell colours, in cases, when the users doesn’t know that CSV doesn’t support multiple sheets, excel doesn’t export (or save) the second sheets data and the user just loses the entire content from the second sheet. Disaster! In one of the cases where I work, a co-worker of mine, has got used to these prompts which Excel shows after you “save” your file as CSV

Prompts user to save the "saved" file again

and he just closes Excel assuming that these prompts are nothing but “bugs” in Excel. (Yeah see, he is a half techie and a little knowledge is dangerous.) Things went fine when he didn’t lose data, but just lost some formatting here and there. But the real disaster happened when his second sheet containing over 1000 lines and 3 hour work was lost.

Now, lets’ see how Numbers, the equivalent software from Apple handles this.

Save As panel for Numbers.app

Apple doesn’t even include CSV or other “lossy” formats in the save as sheet. That doesn’t mean, Numbers can’t “save” your data as CSV. But rather Apple calls it as “Export”. Files you export as CSV aren’t yet saved. So, when the user quit Numbers, and get a prompt to save the document, he will not confused.

Because Microsoft does it this way (wrong way), other software makers like Adobe too make the same mistake. Photoshop “saves” a file as PNG and still give you a sense of feel that you have saved the file. Another such example is audacity and paint.net and even those “save as PDF” plugins. They actually don’t “save” your data, but rather export it. Apple gets it right, but the whole world gets it wrong, Unfortunate!.

Usability Analysis – Office 2010 on Windows 7

July 24th, 2009 by Mugunth Kumar

If you were following my tweets, you might be knowing that I got a invitation from Microsoft to test Microsoft Office 2010.

Invitation to test Microsoft Office 2010

Invitation to test Microsoft Office 2010

Yeah, From the screen shot it should be evident that I’m using a mac now. I testing Office 2010 by installing it on my Windows 7 Virtual Box image. Being a usability guy myself, In this article, I will primarily focus on usability aspects of Word, Excel, PowerPoint and Outlook. I haven’t used OneNote or any other software that comes with Office. Again, feature wise, Microsoft has added a lot new things to Office 2010 (so they say…) If you want to know more about those features, head on to http://www.office2010themovie.com/ Before I wrap up, I will also touch up some minor UI glitches in Windows 7, lack of uniformity in the UI, and what I find interesting.

[ad#AdBrite-Post]

So lets get started.

Word

Splash screen of Word 2010

Splash screen of Word 2010

Whoa… That little splash screen was animated!!! and it lasted only for a second or so. Word 2010 opened up near instantaneously. I was running within a VirtualBox. So I expected it to be slow. Yet to my surprise, the startup was fast. On a real PC, i think one wouldn’t even notice the splash screen. It’s really super fast.


The first thing one would notice is the new “Office Button” The already awesome Office Fluent UI (Codenamed ribbon) has gotten some tweaks especially the Omnipotent Office Button. Clicking that button takes you through a great looking “task centered” page dubbed as Outspace.

Clicking the Office Button reveals this "Omnipotent" UI

Clicking the Office Button reveals this "Omnipotent" UI

The tasks are grouped (highlighted in orange in the screen shot above) elegantly. Clicking a group brings up a separate pane where actions related to that group can be performed. In the above screen shot, what you see is the actions related to the “Info” group. But I’ve a little gripe here. There is no visual cue that a group can be clicked. It appears as if only the buttons are clickable. Moreover, going by classical Windows (or Mac) philosophy, a menu option is usually suffixed with a ellipsis (…) when clicking an item brings up a new dialog or something. However, this guideline was not followed in designing this UI. As such, it’s quite confusing to know what’s going to happen if I click something, before actually clicking it. Small things, but one should really put some effort on the usability aspect of things rather than focusing just on aesthetics.

Second thing I noticed was the support for other open formats. Interestingly (or EU Court pressure?) Office 2010 supports Open Office’s ODT file format natively.

Native Support for OpenOffice Files

Native Support for OpenOffice Files

Nice move from Microsoft which I think many of us will like. Even throughout Windows, I noticed Microsoft’s love (or false love?) for open formats. In fact MS Paint, now saves files in PNG format by default as opposed to Windows Bitmap file!

[ad#AdBrite-Post]

The Office Fluent UI (Ribbon) didn’t have any major UI uplifts. But that should probably because it’s already awesome. Neat and task oriented. However, I still miss the “Search Commands” plugin in Office 2010. Though there is a version of Search Commands plugin that works with this technical preview, In my view, this should be a part of default installation. With over 2000 commands in Office, it’s simply impossible to remember everything. So is the options dialog.
When Microsoft Office 2008 on Mac can include a search button why not Office 2010 on Windows?

You can spotlight for commands in Word 2008 for Mac (but not on Windows)

You can spotlight for commands in Word 2008 for Mac (but not on Windows)

I can’t understand this. If Microsoft can do it for Mac, why can’t they do the same for Windows…? As of Office 2007 the Options pane UI is too clumsy. It still remains clumsy in 2010. Not much changes from 2007 to 2010.

Much of the functionality and features remain the same. However, there was tighter integration with SharePoint Server and Office for Web. If you are going to use it only as a client software, then I would say there is no point in buying 2010 (if you are already using 2007).

Excel

Similar to Word 2010, much of UI part of Excel remained the same. I remember Microsoft shunning Multiple Document Interface long long ago. But still, even in 2010, Excel remains *partly* MDI. People really need to compare two Excel sheets side by side.But even with the excellent Window Management (esp Aero Snap) of Windows 7, because of the MDI nature of Excel, you got to open two instances of Excel to compare them side by side. The screenshot below should illustrate my thoughts.

Excel is still MDI in Office 2010

Excel is still MDI in Office 2010

Moreover, by default, a “New Excel Sheet” opens within the same instance. And, if you have Excel pinned to your Taskbar, clicking on the Excel icon on the taskbar when an instance is already running, just brings that instance to front. If at all you want to open another instance(for comparing two excel sheets), you got to open it from the Programs list. From the above screenshot, you can see how difficult it’s to compare two documents that lie entirely within the application. It defeats the very purpose of all the innovative windowing mechanism brought into the Windows 7.

In the screen shot below, I can easily compare two word documents side by side using this Aero Snap feature.

Comparing Files using Aero Snap is easy because Word is SDI

Comparing Files using Aero Snap is easy because Word is SDI

This is something Excel should have. But atleast for the past ten years (from office 2000), Microsoft has not looked at the usability aspects of Office. I agree, they have been innovating on the SharePoint side, but at the same time, minor usability aspects like this should be addressed. You can’t ignore these issues for over a decade.

The MDI document management model itself is decade old. For example, in the screen shot below, you can’t even close an inactive Window without making it active. Where as elsewhere in Windows, you can.

The inactive sheet has to be made active before you can close it

The inactive sheet has to be made active before you can close it

[ad#AdBrite-Post]

When Windows 7 is superior in Window Management, why not leave the Window Management aspect of the application to it? Simply un-acceptable. This minor glitch has been in Excel for over a decade (from 1997 I suppose). Microsoft itself has moved away from MDI when they moved from Visual Studio 6 to Visual Studio .NET (2001-2002 timeframe). But even in 2010, Excel remains in MDI.

Outlook

When I first started Outlook I was greeted by the Outlook Wizard. It seems like, Outlook 2010 supports SMS, though I didn’t test it out.

Does Outlook 2010 support SMS?

Does Outlook 2010 support SMS?

Thankfully, GMail IMAP configuration was easier than Outlook 2007. If I’m not wrong, Outlook 2007 by default configures POP3 and we as a user have to go through various settings pane to change it to IMAP. But in Outlook 2010, the default mail configuration was IMAP. Happy!!!

However, My first experience was quite bad. Outlook crashed! Restarted it, and it went on fine though. It could even be because I’m running on a VM. But what really frustrated me is the UI. Why doesn’t Microsoft follow their own UI conventions? Why is this Windows 2000 like UI appearing on Outlook 2010?

Outlook Bug UI Issue

Microsoft says it has scrapped off Windows Classic UI in Windows 7. Then from where did such a button come from? With Vista, Microsoft moved the OK button from center to right. Alongside, they should have changed it’s appearance to match the OS it’s running on. But they didn’t. I’m not stressing on the aesthetics here, But the uniformity. If’ I’m running Aero, I should see Aero themed buttons, and not Windows Classic buttons. This kind of uniformity mismatches are spread throughout Vista/Windows 7.

Another such example is the “End Program” dialog.

Again Bad Button

This one is a normal "Not Responding" window.

Why Microsoft, Why? UI Anomalies, can easily frustrate an already frustrated user. Consistency and standards is a very important usability evaluation heuristic.

Microsoft said, Office 2010 will be more “task centric”. Meaning that new workflows, for doing the same thing etc., should be present… But unfortunately, apart from the Office Button UI, not much has changed. The below is a screen shot of the “Mailbox Cleanup”

Old Old Mailbox Cleanup Dialog

Old Old Mailbox Cleanup Dialog

The thing is already complicated. If Office 2010 is “task centric”, there should be some other easier to use dialogs/interfaces for doing the same task. But when you click the “Cleanup options” from the Office Outspace, this same old dialog pops up. I don’t understand how can this be called as “task oriented”. The Office Outspace innovation should have been implemented throughout.

[ad#AdBrite-Post]

Conclusion

To conclude, I didn’t find anything enchanting in Office 2010, apart from the “Outspace” UI. But Office 2010 was a bit faster compared to Office 2007. If you are already running Office 2007, I don’t think there is any compulsion to migrate to 2010, but if you are still using 2003, Office 2010 is a must buy. Infact in the entire era of Microsoft Office, I would support only Office 97 and Office 2007 (and maybe Outlook 2003 for it’s spam protection). Everything else were sort of minor updates. Microsoft should really consider making the “Options” dialog more task oriented. A kind of ribbon innovation and they should incorporate the “Search Commands” plugin into the Fluent UI by default. That would really make Office 201X a great update. Let’s see…

Elements of Usability Design: OK/Cancel vs Cancel/OK – Is it just a matter of taste?

July 19th, 2009 by Mugunth Kumar


OK, many of the programmers would have been confused as how to design a dialog on your website. In what order should the dialog contain the OK and Cancel Buttons? Should it be OK – Cancel like Windows or Cancel – OK like the Mac? Are there any “rule of thumb” why a certain standard should be followed? Or is it just a matter of taste?

Firstly Apple’s Human Interface Guidelines state that, rather than OK or Cancel, use the action verb that determines what the user is going to perform. KDE for Linux and Microsoft’s own Human Interface Guidelines also state the same. For example, the screenshot of Smultron, (a text editor I use extensively on Mac) shows the dialog like this.

Smultron - Shows Save/Don't Save over OK/Cancel

Smultron - Shows Save/Don't Save over OK/Cancel

If you have been using a Mac extensively, you would note that, majority of application use this philosophy. The reason? Minimalist Design. Your UI shouldn’t be cluttered. A traditional Microsoft dialog would be like,

The document has unsaved changes. Quitting this application will really make you lose all your changes. If you really want to lose them click OK, else click Cancel

What’s the problem with this design? – Lack of minimalism.
People prefer minimalistic user interface.
According to Jakob Nielsen’s Heuristics for User Interface Design, one of his heuristics for usablity design states that,
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.


In the Smultron’s case, the user needn’t even read what the Application is trying to say. The buttons are marked clearly and user can click an option with confidence. It follows minimalism. Mac users appreciate this minimalism. The UI is uncluttered with unwanted options unlike Windows.

Look at this screenshot taken from Office 2010. It has a option to open System Information dialog from the About box. A legacy followed for atleast a decade.

Why do we need a shortcut to system info dialog from Outlook?

Why do we need a shortcut to system info dialog from Outlook?

Users will only be confused with this kind of workflow, wherein I have to open outlook to see my system information. A minimalistic UI shouldn’t be cluttered like this.

OK, if Microsoft is making these kind of silly usability mistakes, why should Windows programmers also follow the same cluttered, “un-minimalistic” UI design? Don’t shout at me, I’m also a Windows Developer. The reason, until Windows Vista, a Windows Programmer cannot (atleast easily) change the OK/CANCEL or ABORT/RETRY/CANCEL text from a dialog. Only with Vista (how many years after Mac???) did Microsoft introduced Task Dialog. Only with a task dialog can the developer change the button face text easily. You might have noticed the changes in Windows Vista’s Notepad or Paint’s dialog. Only with better SDK, can we deliver quality products.

Paint Save dialog

Now coming to the order of buttons, our main topic, after a useful digression, should it be OK-CANCEL or CANCEL-OK? Mac introduced GUI far before Windows (of course Apple copied it unabashedly from Xerox PARC Labs).

I would say if you are a platform developer, follow the platform conventions. For example, iTunes on Windows follows Microsoft’s conventions of OK-CANCEL rather than CANCEL-OK like Mac.

iTunes preferences on Windows Vista

iTunes preferences on Windows Vista

So is Microsoft Office on Mac.

Preferences Pane of Word 2008 for Macintosh

Preferences Pane of Word 2008 for Macintosh

Why is this so? Because you should not confuse users. Cancel – OK might be superior for Apple. But when it comes to Windows development, they follow the platform conventions. So did Microsoft.

Now, with more and more applications moving towards web and cloud computing is taking the norm, which philosophy should your web application follow? Now that’s an interesting question. Apple chose that any “positive action” should be on the right and negative actions should be on the left. Why? Because the real world has been modeled like that. See this link (opens in new window). Long long ago, when people hated left handers, they used the word “gauche” (which actually means left) for anything that’s awkward and now Oxford says the meaning of gauche is awkward.. Slowly, it has been hardwired into our brain that left means something awkward. Another reason, why over 75% of countries drive on the right is because of this. (Though driving on the left has recorded lesser accidents because, when you drive on the left you can react quickly to oncoming vehicles which is to your right).

Apple’s philosophy of choosing positives on the right can be seen throughout the UI. The desktop icons are aligned from the right. Any task panes/toolboxes are placed on your right (unless you are a left handed person, you usually leave your pen on the right side of the writing pad isn’t it?)

The close button is placed on the left top corner as opposed to the right corner. The “Don’t Save” button is to the left of the Save button.

Tasks pane on XP

Tasks pane on XP

Office shows the tasks pane on the right

Office shows the tasks pane on the right

Microsoft never follow any sort of convention. Windows Explorer’s tasks are placed on the left where as Office shows its tasks pane on the right. I’ve literally no idea, why it’s like this by design.

Web applications like Wordpress uses this convention.

Publish button is to the right, Delete is to the left.

Publish button is to the right, Delete is to the left.

Even Microsoft’s Bing uses this convention!!!

Even Bing uses this convention!

Even Bing uses this convention!

The download button is to the right. The normal Microsoft convention is to have it at the center when there is only one button. Any website you visit will have “Actions” to the right and “Navigation” links to the left. For example, your shopping carts are always to the right in a majority of cases.

Though Windows had a huge market share, why did web developers stick with the Mac way of doing things? Because the browser philosophy was like that. To go the the previous page, you click the button to the left, to move forward, you click the button to the right. The philosophy is, to progress forward click the “Right” button. A variety of web forms use this philosophy. Look at the location of “Sign in” boxes on Yahoo and Gmail. They are placed on the right.

Now, critics claim that since English is written from left to right, the icon ordering and the order of buttons should follow the other way round. If I’m not wrong, the world’s first written language, Chinese (not the Mandarin flavour) was written top to bottom, right to left. Why did the chinese wrote that way? Because, intuitively, it was the most comfortable way to read. But when the printing industry took the centre stage, to facilitate easier printing and easier stacking of the character moulds, they followed this left to right norm and it still stays like that till date. Sometimes technological limitations force us to do things the wrong way. We all use QWERTY keyboard over DVORAK keyboard though DVORAK was designed for humans and is ergonomically superior to QWERTY. It happens. Can’t help it. But don’t let something like that happen again. You may end up getting carpal tunnel like syndromes for your eyes!

So in my opinion, ordering of buttons or layouts is not just a matter of taste. Follow platform conventions when targeting a platform. Else follow the “Apple way” or the right way.

Mugunth


6 visitors online now
6 guests, 0 members
Max visitors today: 19 at 05:00 pm SGT
This month: 58 at 03-01-2010 02:57 am SGT
This year: 59 at 02-12-2010 06:23 am SGT
All time: 59 at 12-19-2009 09:48 pm SGT