GUI Makeover

[Joe]

I was wondering if the GUI could be more like Os X. I have made a mockup of what I have in mind. I took the search bar from the latest version of MacSword, and the graph icon from the resources of Pages. The tab is from Terminal.

 

The graph replaces the details button. The first button in the toolbar is for searching for a verse reference (John 3:16), and the second is for searching for a word (or other advanced searches). The history button is replaced by the drop down arrow next to the magnifying glass in the search box. The plus will allow one to add more search criteria and the refresh button is to run the search in the search box (especially after it is altered). The verse info is not at the bottom of the window.

 

Also, the six arrows at the bottom have been replaced by two. Clicking should go up for down one verse. Command clicking should navigate by chapter, and option clicking should move by book.

 

Could something like this be implemented?

 

I have attached my idea, but if it does not come through for some reason, it can be seen at : http://revision29.com/accordance.jpg

[David Lang]

Joe,

 

You'll actually be seeing a number of GUI improvements in coming versions, and some aspects of your mockup resemble some of the ideas we're discussing. While I like the look of your mockup, there are some things we need to consider that mitigate against some of your ideas.

 

1. Downward facing tabs imply that only the content below the window's control panel changes. That's true in a web browser like Safari, but not true in Accordance, where different windows with different control panels make up the tabs. Upward facing tabs with different control panels below communicate that notion more clearly.

 

2. I'm not sure what the Plus and Refresh buttons in your mockup are for. Perhaps the Refresh is meant to replace the current blue Search button and the Plus button would reveal the More search options? (Duh. Just reread your post and noticed you explained this. Sorry!)

 

3. There's some functionality which appears to have been lost in your mockup. How do I know which text I'm searching? I only see the texts displayed in each pane, but not the search text. The Go To Box at the bottom has been removed, and that's a pretty important navigation tool.

 

4. Personally, I like the understated navigation arrows at the bottom, although there's no indication by what increments the user would be moving forward and back. One thing we face which may be less of an issue for other programs is that a large portion of our user base is made up of middle-aged and up pastors and scholars who get frustrated with having to click such tiny controls. (Heck, I'm now reaching the age where that's becoming an issue for me!) So while I'd like to save a few pixels at the bottom, and while I agree that the navigation arrows need a new look, we can't go quite that small with our controls.

 

I appreciate you sending this and taking the time to do the mockup. It does help us in our current interface discussions. Please take these points not as criticisms, but as a serious attempt to interact with your ideas.

[Dr. Nathan Parker]

I like some of the elements (amplify icons in the toolbar, downward tabs, etc.). I would have done a few things differently in a mockup (mine would center around the whole workspace idea), but yours is definitely fresh and clean looking.

[Joe]

With this, I was trying to put together a rough mockup of something that was a little more Os X like. I hacked together stuff from several locations, and that is why it is not the best. My basic idea is to make the window look more like a leopard textured window with tabs. In addition to that, I would just like to see some of the clutter cleaned up a bit. There are to many things that take my eyes away from the text as many of the UI elements stand out quite a bit. A window style that looks more like the Leopard Finder, in window texture and button style would make the UI elements a little less conspicuous and would make it easier for me to concentrate on the text.

 

The color of the window content is a light gray color (which I think is the default color for a window background in Os X such as with the background color of the ruler in TextEdit). The problem is when such colorful and high contrast elements get placed on top of that. Additionally, many of the elements are large and take up a lot of screen real estate, which makes them stand out all the more.

 

What would help make it so much cleaner would be to add a toolbar similar to the standard toolbar layout of os x programs (finder, mail, itunes, etc). Instead of word based buttons ("Words", "Verses", "Details"), less obtrusive icons that represent the function they have will make them look cleaner. This look is much nicer with bottom tabs, instead of top tabs. It is the difference between the tabs in Opera browser vs those of Safari. Safari looks cleaner because the toolbar and the tabs flow together without the disjointed space.

 

To me tabs do not represent static vs no-static content, but rather the function that I am trying to do. I have a gmail web browser tab for checking my email. I have another one for checking for software updates. In the same way, I see that the tabs in Accordance represent what I am doing in that tab. I might have a dictionary tab, an english versions comparison tab, or a hebrew to lxx tab. The behavior and state of the toolbar is dependent on what tab I am in. If in tab one I did a search for Jesus, then "Jesus" would be in the search box. If in tab two, if I looked up logos in my lexicon, if would have logos (the greek letters of course), in the search box. I do not mean to change the current function of the Accordance tabs, just merely the layout. I say all of this about the tabs, David, because I do not quite understand your critique of up versus down facing tabs (in other words I have a thick skull).

 

Let me tell you the motivation behind why I suggest doing a little more work on the UI. I am not really a programmer, though I do program in a couple of interpreted languages. Cocoa and Carbon is a little beyond me, so I do not have a lot of room to talk. However, I do not really have graphical skills. I am better at programming than making a UI. I made the one I did by hashing a bunch of stuff together. Those things really come from the look and style of Leopard using standard Cocoa APIs. However, I do know when something does not look quite right. When I first say Accordance, I thought it was not a good piece of software because the UI needed some work. It was only after I looked at the demo and talked to one of my friends that I was convinced that it was worth purchasing. On the other hand, Logos for Mac has come out. I was torn between which to get. Logos looks like it is a better software because the UI is a lot cleaner and crisper. With all of the buttons and information in the Accordance window I was overwhelmed. With Logos, things are cleaner and looks a bit simpler. The problem is that Accordance is the better product as far as what it can do, but it does not look that way.

 

Let me make a little comparison. I am not sure if you are familiar with subversion. It is a way of developers to keep track of changes made to code. There are various programs out there that allow one to interact with subversion repositories. There is a real slick program called Versions, which has a beautiful and simple interface. It is a little expensive, but I really want it. I have another program called svnX, which does the same thing, but is also free. Seriously, they both do the same basic thing because they both use the same exact backend svn commands to do what they do. svnX actually allows you to do a little more, because it gives you more control. The problem is that svnX is an eyesore. Accordance is no where near as bad as svnX. The reason why Versions actually sells, is that it looks better even though it does the same thing. svnX might actually be a bit better as it allows for more flexibility and customization than Versions, but you would not know unless you were a super geek and made the interface yourself.

 

I do not want the same thing to happen with Accordance. It is such a wonderful and powerful tool (plus I can actually afford it). I would just like the UI to look more updated so that it does not look like an inferior app, even though it is superior. I think most of the current UI elements can exist, perhaps in a slightly different place, or with a slightly different design. The only thing I would axe would be the six up/down buttons. If you notice in my mockup, I kept all of the buttons, but put them somewhere different except the buttons for each module. I literally "drew" my mockup on top of a screenshot that I took of Accordance. The most I altered was in what I would call the toolbar, but you seem to call the control area (tomatoes, tomatoes).

 

Speaking of axes, do you think you could put the (Shift-10x) in a tooltip (help) popup bubble when hovering over the up/down arrows?

 

I really do not want to make it sound like I am coming down hard on this app. I know you guys have worked real hard on it for a long time. I am a newcomer to the world of accordance, and as such I just want to offer some friendly suggestions. I would prefer that you guys continue to make the functionality of the app better over making the UI better. If I have sounded abrasive, I apologize.

 

I really like how you have made it possible to change the display of the module text. Some people find it easier to read with white on black or other strange combinations, so this is a wonderful feature. Or as I saw in some of the demo videos, it can be made to look a little more like real paper. I also like the Library panel. It is well laid out and finding things is very simple. I like having things in drop down categories. What really sold me was the drag and drop sentence diagramming and the powerful search syntax.

[jackcav]

 

When I first say Accordance, I thought it was not a good piece of software because the UI needed some work. It was only after I looked at the demo and talked to one of my friends that I was convinced that it was worth purchasing. On the other hand, Logos for Mac has come out. I was torn between which to get. Logos looks like it is a better software because the UI is a lot cleaner and crisper. With all of the buttons and information in the Accordance window I was overwhelmed. With Logos, things are cleaner and looks a bit simpler. The problem is that Accordance is the better product as far as what it can do, but it does not look that way.

 

 

Joe

 

Have you attempted to actually use Logos Mac? I don't think its window-handling capability is good. The toolbar looks good, but it is all down hill from there. Every open window is separate and consumes half the screen when first opened. Resizing is a pain, and if you open more than three or four windows, you have to search for the one you want to view next (Expose does not solve this problem).

 

Please, David, do not follow Logos' example. In fact, some people on the Logos forums advise that Logos Mac borrow from Accordance!

 

Jack

[David Lang]

Joe,

 

Don't worry, I'm not trying to shoot down your ideas, many of which we already plan to implement in some form or other. Neither do I think you've come across as abrasive or coming down too hard on us. Good interface design is challenging, and we freely admit we haven't gotten everything right. We've been listening carefully to everyone who has complained that the look of Accordance seems dated, and I've been trying to figure out what specifically they mean. One of the things we definitely will change is the use of the flat gray background for window surfaces instead of the textured look you're advocating. We've also been discussing some of the other things you've suggested.

 

Seeing people describe another product as Mac-like when it has a significant number of UI gaffes has certainly driven home to us how important initial appearance really is, and we're determined to make Accordance as eye-catching as it is accessible.

 

With respect to downward versus upward facing tabs, I'm not sure I've seen any program which uses downward facing tabs changing the controls which appear above the tab as a new tab is selected. It is only the content below the tab which changes. That is why I am suggesting that upward facing tabs make more sense for Accordance. That said, I think we can improve the look of the current tabs by using textured surfaces and other visual enhancements.

 

As I said, the text navigation buttons definitely will change. In fact, they already have slightly. Have you noticed the Shift = 10x label on version 8.3? You'll now find it in the tooltip (if you hold down the command key).

 

The challenge we have with any redesign of the Accordance interface is to make it more attractive and intuitive without adding extra hoops for the user to jump through. It's easy to have a clean-looking interface if you hide much of the functionality. I'm not suggesting that's what you did in your mockup, but it is what most programs do. Accordance is powerful and easy to use because everything is at your fingertips, but I agree that we need to simplify things for the new user and improve the interface so it does a better job of drawing you in.

 

So we appreciate your suggestions and are open to hearing from others.

 

For example, how often do you all use the text navigation buttons? Do you like having three sets of buttons so that you can immediately jump by verse, chapter, or book, or would a control where you pick the increment to jump by before clicking the arrows be good enough? How would you feel if we reduced the size of the arrows? Would a smaller target frustrate you?

 

How do you all feel about icon buttons for the words and verses as opposed to text buttons? (Another idea we've already been kicking around) The downside of course is that you have to mouse over the icons if their meaning isn't immediately clear. The upside is better use of space and less text. We went with an icon button for the OK button and everyone seemed to like the change.

 

I'm happy to get everyone's feedback, provided you understand that we have reasons for some of our interface design decisions which may not be immediately apparent.

[jackcav]

 

For example, how often do you all use the text navigation buttons? Do you like having three sets of buttons so that you can immediately jump by verse, chapter, or book, or would a control where you pick the increment to jump by before clicking the arrows be good enough? How would you feel if we reduced the size of the arrows? Would a smaller target frustrate you?

 

How do you all feel about icon buttons for the words and verses as opposed to text buttons? (Another idea we've already been kicking around) The downside of course is that you have to mouse over the icons if their meaning isn't immediately clear. The upside is better use of space and less text. We went with an icon button for the OK button and everyone seemed to like the change.

 

I'm happy to get everyone's feedback, provided you understand that we have reasons for some of our interface design decisions which may not be immediately apparent.

 

David

 

I seldom use the text navigation buttons, but I use the Mk buttons in resource windows extensively. The icon buttons for words and verses would be neater in appearance. I don't think this would cause much difficult in use.

 

Jack

[Joe]

David, now I understand what you mean by the controls changing in each tab. My thought went the way of the normal toolbar format for Os X apps. The basic design concept their is that the toolbar controls stay the same no matter the context a person is in. Microsoft tried to buck this trend with their Office ribbon interface (which changes the controls based on context). That does not fit well with the design philosophy (for lack of better word) of most Os X apps. That is why Pages adds a little bar under the toolbar for context based controls. That is of course not very compatible with the way Accordance works. The closet application that I know that has a toolbar that changes content based on context is the text editor Espresso. Out of the box, that is not how it works, but it is possible. The toolbar is controlled by the plugin that handles the file type that one is editing (there are php, perl, javascript, css, html and other plugins). In theory a plug-in could have totally different toolbar buttons from one another, but is only theoretical and from what I have no one has implemented it. As to Accordance and my mockup, I did not take into account that the controls change pretty drastically based on the type of module one is looking at.

 

In conversing back and forth, my idea is becoming more solid. Before it was kind of vague and I had a hard time articulating it. I really think that the main control area would look real crisp, if all of the text based drop downs (the bible version in the bible module, words/verses in the same, lexicon in the lexicon module, search mode [Greek entry, english gloss, etc] in the UBS lexicon), were replaced by representative icons. Clicking on it would produce the same drop down as the text based selectors. In a case where it is a mode type button (greek vs english input) the icon would change based on what it is being used for. That though is tricky because some of the modes might be similar (several flavors of greek or english input). Regardless, I think that all of the buttons and drop down menus in the main control area at the top, as well as the search bar, should be all on the same line. The history button should be migrated into the search box (as is the search box in Safari). I have a new use for the plus in my mockup (I can't remember what I said it should be for), but it should be immediately to the right of the search box. Clicking it would show the "More options" for the search just below the search bar as it is now. The search button should be somehow melded to the right edge of the search bar. The button should be the same height as the search bar and should look like it is an end-cap for it.

 

Basically, my idea has been refined to :line up as many controls in a line as possible and make the color scheme a little more up to date. I apologize for writing so much about this, but it has just got my mind into a brainstorm mode. When that happens, it can be hard to stop.

 

I do thank you for actually paying attention to the forums and taking what we have to say seriously. That seems that is becoming more rare with software developers.

[Lorinda H. M. Hoover]

I find the icons for verses and words in the mock-up confusing. I prefer labeled buttons for that, but if icons are used, they should be different than the ones in the mock-up, something more "intuitive."

 

I would not want smaller arrows at the base, and I would prefer that the separate arrows be kept. I don't use them all that often, but when I do I want them easy to access.

 

Lorinda

[DanG]

David

 

I seldom use the text navigation buttons, but I use the Mk buttons in resource windows extensively. The icon buttons for words and verses would be neater in appearance. I don't think this would cause much difficult in use.

 

Jack

 

I agree with Jack on both counts.

 

I strongly agree with Joe that the UI could use a make over that resulted in a much cleaner look w/o sacrificing functionality. A UI that's too busy LOOKS complicated, which I think is what Joe is getting at.

[Fred Markert]

I use the navigation triangles at the bottom a lot and I'm in that "middle-aged" category so I wouldn't want them any smaller.

 

I also prefer them all to remain rather than one set of triangles that have different functions depending on the modifier key that's pressed.

 

What I would suggest, however, is putting some space between the three categories of triangles to distinguish them a little more. Also, if they were not a pastel blue, but a darker gray with the three-dimensional Aqua interface look, that would be nice.

[ChristianB]

I was wondering if the GUI could be more like Os X. I have made a mockup of what I have in mind. …

 

I'm still kind of new to Accordance and I'm totally with you on what you suggested. This is a really interesting discussion.

 

I know that there are special needs for a powerful bible software like Accordance and it doesn't compare to other software. Nevertheless I think it really matters that Accordance tries to keep up with "modern" UI design. Honestly some of the UI elements even in the upcoming version 9 remind me more of OS 10.4.

(e.g. compare this http://f.cl.ly/items/3c96aa8053d2d44db87c/New%20in%209%20__%20Products.jpg to a similar element in iCal http://f.cl.ly/items/4a20457444c089bcb4b0/iCal-1.jpg or Mail/Colloquy http://f.cl.ly/items/0f17e94750317b5bef9e/Bildschirmfoto%202010-09-16%20um%2021.26.02.png)

 

A lot of modern apps don't even support 10.4 anymore. You may like it or not but thats also how Apple is wired. They are not looking back. There may be folks still preferinf Powermacs but its unlikely they will find a replacement if there machine will die on them in a few years.

What I'm trying to say is that it makes sense to try being in sync with new developments regarding UI and coding (Cocoa) on the Mac platform. It makes it easier for the majority of users if Accordance operates and looks as much as possible like the recent Mac apps like the iLife and iWork stuff and popular third party apps (1Password, Pixelmator, …)

 

There is also functionality I still miss in Accordance which most of Mac apps share like recent documents, folder (depending on the app), spelling (I know Accordance has spelling but it doesn't work like in other apps and only supports english) etc. … I'm not a developer but I believe a lot of this is related to the codebase (Carbon vs. Cocoa).

To give an example why I find this stuff helpful: The recent feature is accessible via LaunchBar. So I can open my recent used Mindnode Pro, Pages, Keynote, Pixelmator, etc. documents and (since 10.6 also) Finder folders really really fast.

A similar field is the use of modifier keys (alt, cmd, ctrl) and shortcuts …

 

This (both UI and functionality) is what I have in mind using the term "OS X like". And thats where I think Accordance could still improve.