New Version Screenshot Thread

mikelove

皇帝
Staff member
In which I'll occasionally post various telling bits of UI from the big update - here's the first one:



So we went with the Facebook/Path-style sidebar after all, after realizing that our hierarchy is really only deep because we limit ourselves to 5 items in the bottom bar - doing things this way should make task switching a lot faster and more flexible and gives us virtually unlimited UI expansion potential for the future.

The type design in the entry list is unfinished - you can see the new fonts are in, but we're still using the old layout. (finished type design arrived a few days ago but we haven't implemented it yet) Though it's actually not going to change all that much, since we already support pretty much any arrangement you might want - the default may be a different one, though, e.g. characters + pinyin on the same line.

Note the absence of a bottom toolbar in the dictionary search screen - tentative, but we're finally taking the "your user interface is too complicated" complaints seriously, and none of the options besides the now-replaced fan icon were actually important enough to anchor to the UI by default. So the current plan is the menu button at the top left, a combined dictionary + language switch button (see this Android thread for some discussion of that) at the top right, an input method bar that slides out when the keyboard is open and that's it. (embedded definition / iPad gets a few more buttons but possibly still no bottom bar, we're still rearranging things there)

Also note the multiple documents under the document reader - particularly pleased with that one, we're combining multi-session support with a recent document history (also extending to the clipboard / lyrics / web / etc) so that you'll basically just see a list of the last few documents you've viewed and won't need to even think about which one is "active." (the list will be expandable, but we're still deciding between a "More..." item and a little > button next to "Document Reader" - Facebook does the latter but we think the former is more discoverable)
 

Attachments

  • 23screenshot1.png
    23screenshot1.png
    143.7 KB · Views: 1,721

mikelove

皇帝
Staff member
goldyn chyld said:
Looks good... will you be releasing a beta version soon? I can help you test it.

Probably within the next month or two - this is unrelated to how development is going, but our developer account renews in July (which lets us delete / activate a fresh crop of 100 test devices), so we want to make sure to use up the remaining device slots from the past year before then.
 

alanmd

探花
I think it looks a lot cleaner than the current icons in the bottom bar and the fan; I think getting rid if that bottom bar altogether would be a good step. It was fine for most of us but I would think the lack of text beside the icons was probably confusing for new users, and the fan is a bit of a nonstandard way to navigate an app. I assume any functionality such as the simp/trad will be moved somewhere logical. Would love to help to try and break the beta version if you need testers!
 

sandwich

举人
Looks great, definitely an improvement. Is the style a first draft, or do you want it to behave and look like facebook?

mikelove said:
The list will be expandable, but we're still deciding between a "More..." item and a little > button next to "Document Reader" - Facebook does the latter but we think the former is more discoverable.
I would agree that "More... v"/"Less... ^" is probably more intuitive, however it is a question of vertical space. If you think you'll add a lot more things to the menu, then the facebook way might be better. How does the menu function on landscape mode for small screen devices?

mikelove said:
finished type design arrived a few days ago but we haven't implemented it yet
This is good news, just how long has it been now? :D

Edit: Just as an aside, I hope to see "Search examples" appear under that "Search" one day. :wink:
 

mikelove

皇帝
Staff member
alanmd said:
I think it looks a lot cleaner than the current icons in the bottom bar and the fan; I think getting rid if that bottom bar altogether would be a good step. It was fine for most of us but I would think the lack of text beside the icons was probably confusing for new users, and the fan is a bit of a nonstandard way to navigate an app. I assume any functionality such as the simp/trad will be moved somewhere logical. Would love to help to try and break the beta version if you need testers!

Thanks! The lack of built-in explanations made those icons very hard to use, yes. (tooltips might have helped, I suppose, but there's no standard way to do those on iOS)

sandwich said:
Is the style a first draft, or do you want it to behave and look like facebook?

Just in the sidebar - we're not really trying to copy Facebook in general, but the sidebar has taken off as an extremely popular approach to top-level menus in mobile apps over the last year or two; I believe BlackBerry 10 even built it into the OS, and I'd give 50-50 odds that Apple will do the same in iOS 7.

The rest of the style of the app is still being changed quite a lot, we're generally going more minimalist / flat so as to accentuate the typography (which ought to be front and center anyway in such a text-oriented app) - been through a whole bunch of different iterations and we're getting closer but we're still not quite happy with it.

sandwich said:
I would agree that "More... v"/"Less... ^" is probably more intuitive, however it is a question of vertical space. If you think you'll add a lot more things to the menu, then the facebook way might be better. How does the menu function on landscape mode for small screen devices?

The same way, it's just shorter. We're going to support reordering the sections in the menu so that if you're a habitual landscape-orientation iPhone user you can hopefully get what you need up top and avoid a lot of extra scrolling.

sandwich said:
This is good news, just how long has it been now?

Was supposed to be delivered in September. But in fairness, he's a full-time design professor and the school year started back up then, so once the schedule slipped a little it was doomed to slip a lot. (and actually, we only took delivery of the Chinese font used in the design a few weeks ago - not his fault at all - and we're still waiting on the bold version of it, though we can get away with leaving that out of the initial release of the new version if we have to)

sandwich said:
Edit: Just as an aside, I hope to see "Search examples" appear under that "Search" one day.

We're actually planning to do those through the new "word info" screen - lists frequency, synonyms / antonyms, and cross-dictionary list of all examples containing that word. (50-50 whether all of that will make it into this update but it's definitely in the pipeline - we're already paying annual royalties on that synonym/antonym data so it would be annoying not to be able to include it)

gato said:
If one is already in the dictionary, would searching require using the menu?

No, in fact we should probably name that item something other than "Search" to make that clearer. (maybe just "Dictionary" but that's a bit ambiguous)
 

sandwich

举人
mikelove said:
Just in the sidebar - we're not really trying to copy Facebook in general, but the sidebar has taken off as an extremely popular approach to top-level menus in mobile apps over the last year or two; I believe BlackBerry 10 even built it into the OS, and I'd give 50-50 odds that Apple will do the same in iOS 7.
It was the menu icon (The one with the three lines) that had me worried the most. Hate to see Pleco trodden on over lameo copy write issues or whatever :roll: . But if everyone else is doing it, meh...

mikelove said:
The same way, it's just shorter. We're going to support reordering the sections in the menu so that if you're a habitual landscape-orientation iPhone user you can hopefully get what you need up top and avoid a lot of extra scrolling.
Wasn't asking because I use the feature; I "rarely" unlock the orientation apart for video. I just knew the current version supported it, and was curious to how it would work. Hearing about the reordering, answers another question I didn't ask. Sounds good.

mikelove said:
We're actually planning to do those through the new "word info" screen - lists frequency, synonyms / antonyms, and cross-dictionary list of all examples containing that word. (50-50 whether all of that will make it into this update but it's definitely in the pipeline - we're already paying annual royalties on that synonym/antonym data so it would be annoying not to be able to include it)
Was actually hoping that there would be two workflows, "Search>Dictionary Entry>Word Info>Example Sentences" and "Search Examples>Example Sentences". But tbh, maybe I should just hold my tongue till I see what you do with it. Also, It's not in the current version so I wouldn't rush anything. Less features in the big update, means less initial bugs, means less people running around screaming about how the world has ended. ;) (Kinda surprised that the feature set isn't frozen yet, maybe your not as far along development as I thou..er... hoped)

Anyway, I'll stop bogging up the forum w/ my posts for now. Thanks for keeping us updated, looks good to me. Cant wait to see it all come together.
 

mikelove

皇帝
Staff member
sandwich said:
It was the menu icon (The one with the three lines) that had me worried the most. Hate to see Pleco trodden on over lameo copy write issues or whatever . But if everyone else is doing it, meh...

Oh, that one's quite universal - see this article e.g. - I don't believe it even originated with Facebook. Actually even Apple uses it in the search bar in a few places (e.g. when you tap "Done" after doing a search in the iPad version of App Store).

sandwich said:
Was actually hoping that there would be two workflows, "Search>Dictionary Entry>Word Info>Example Sentences" and "Search Examples>Example Sentences". But tbh, maybe I should just hold my tongue till I see what you do with it. Also, It's not in the current version so I wouldn't rush anything. Less features in the big update, means less initial bugs, means less people running around screaming about how the world has ended. (Kinda surprised that the feature set isn't frozen yet, maybe your not as far along development as I thou..er... hoped)

We don't freeze feature sets until the very end, usually - things are ready when they're ready and we want to maintain the freedom to cut out features at the last minute without people screaming at us.

Development-wise, most of the really hard stuff (e.g., multithreaded / merged search) was actually finished months ago when we released 2.4 on Android - since then it's been mostly waiting on external inputs like the new type design and some data files, though the amount of waiting for those has allowed us to go in and add some features we weren't planning to do until a later release (like the hugely improved new live web reading system we think we're going to be able to debut in this update) and to make some slightly more dramatic UI changes than we had otherwise planned.
 

alanmd

探花
The three-stripe-button to expose a menu on the left hand side isn't just used by Facebook, here's YouTube's iOS App:



And a website admin App made by Weebly:
 

Attachments

  • IMG_2906.PNG
    IMG_2906.PNG
    159.2 KB · Views: 1,169
  • IMG_2904.PNG
    IMG_2904.PNG
    123.2 KB · Views: 1,208
Looking great Mike and Team! The uncrowded, minimalist approach with the new fonts looks very clean indeed. Reducing the number of taps to get to searches, navigate menus, open different modules such as Flashcards, document reader and OCR, etc., will be beneficial to all of us. I can't wait to get my hands on it :)
 

mikelove

皇帝
Staff member
hairyleprechaun said:
Looking great Mike and Team! The uncrowded, minimalist approach with the new fonts looks very clean indeed. Reducing the number of taps to get to searches, navigate menus, open different modules such as Flashcards, document reader and OCR, etc., will be beneficial to all of us. I can't wait to get my hands on it :)

Thanks! Actually the minimalism may be much more pervasive than this, depending on what we decide to do with toolbars. (as of iOS 5, you can change the look of every toolbar in your app with 2 lines of code, so we can / have been experimenting with various levels of minimalism / flatness)
 

mikelove

皇帝
Staff member
Here's another one, of the new definition screen. Flashcard adding button is still being debated (will either be a little overlay at the bottom left/right corner of the screen or a + button on the right side of the header box), and the red highlighting of the headword in examples will probably be replaced by boldface (bold version of our new Chinese font hasn't arrived yet), but most of the rest is pretty well set - performance-wise, we've now gotten things to a place where even with an extremely long word like 打, we can load / format / word-wrap every dictionary's entry in a single box and still pull up results instantly, so the long-requested single scrolling entry box is now a reality.
 

Attachments

  • 23screenshot2.png
    23screenshot2.png
    102.5 KB · Views: 1,149

alanmd

探花
The merged entry looks great! I think the new layout shows the multiple definitions much more clearly than the old (1) and (2) in a circle, and the separation of pronunciation and definition is very clear.

I assume that Zhuyin and Cantonese are optional(?). Probably not important, but isn't Zhuyin also 'Mandarin'? Someone somewhere might be upset by calling Pinyin 'MAN'.

One other thing occurred to me- with a whole line devoted to the dictionary name, is there room for a more than just the 3-character abbreviation? Sometimes the difference between GF, GH, GR, GRH, etc. takes a bit of mental effort. I suppose I can see how keeping the abbreviations would be less clutter.
 
It looks good! But I think I'd prefer to keep various dictionary colors (to make dicts more distinguishable from one another), i.e. PLC light blue, ABC olive green etc.

I like the merged results. Perhaps if you could trim a little bit of white space in between the lines, it'd be even better, so to save some space.

Also, it'll be possible to turn off ZHU and CAN, right?
 

mikelove

皇帝
Staff member
alanmd said:
I assume that Zhuyin and Cantonese are optional(?). Probably not important, but isn't Zhuyin also 'Mandarin'? Someone somewhere might be upset by calling Pinyin 'MAN'.

Optional, yes. And yeah, we may end up with PY/ZY/YY or somesuch.

alanmd said:
One other thing occurred to me- with a whole line devoted to the dictionary name, is there room for a more than just the 3-character abbreviation? Sometimes the difference between GF, GH, GR, GRH, etc. takes a bit of mental effort. I suppose I can see how keeping the abbreviations would be less clutter.

We want it to be easy to spot the divisions between dictionaries when scrolling through a bunch of entries rapidly; you can easily change the abbreviations for dictionaries to more distinctive letters in Manage Dicts, though.

goldyn chyld said:
It looks good! But I think I'd prefer to keep various dictionary colors (to make dicts more distinguishable from one another), i.e. PLC light blue, ABC olive green etc.

To be honest, we removed that option on Android and have had exactly zero complaints about it in the nearly 2 years since we released our first Android beta, so we're inclined to drop it on iOS as well - one of a number of options that we hastily ported over from Palm/WM without question but have now reconsidered.

goldyn chyld said:
I like the merged results. Perhaps if you could trim a little bit of white space in between the lines, it'd be even better, so to save some space.

Thanks! Balancing readability and information density is tricky - I think this is a much better compromise than the current, extremely-white-space-intensive PLC layout, though.
 

mikelove

皇帝
Staff member
sandwich said:
The "three bar" menu button is going to jump around?

It may not even be visible in this screen by default, but yes, if it is visible in a sub-screen then it would have to jump around - this is what most other apps do with it in the same situation, and the alternative of moving the back button to a non-standard location seems much worse.
 

sandwich

举人
mikelove said:
sandwich said:
The "three bar" menu button is going to jump around?
It may not even be visible in this screen by default, but yes, if it is visible in a sub-screen then it would have to jump around - this is what most other apps do with it in the same situation, and the alternative of moving the back button to a non-standard location seems much worse.
Functionally why does it "seem much worse" to swap the positions? I can think of visual reasons, but nothing that couldn't be solved by making the menu button look less like a button.

Having things move around seems much worse to me. Sure, I did get used to the dictionary select button moving in the current version, but that doesn't stop it from being bad UI. The menu button seems a little more important than that. (Maybe if pleco has swipes, I wont actually care if it jumps to a random location :roll:.)
 

mikelove

皇帝
Staff member
sandwich said:
Functionally why does it "seem much worse" to swap the positions? I can think of visual reasons, but nothing that couldn't be solved by making the menu button look less like a button.

Because in every other iOS app with a drill-down navigation interface, including all of Apple's own apps, the back button is at the top left corner of the screen. The iOS navigation bar APIs concerning concerning back buttons also push us in this direction - it's possible to insert buttons to the right of the back button (buttons which will appear at the top left corner if you're at the highest level screen and there's no back button available), but it's not possible to insert them to the left of it without writing your own brand new navigation bar UI. So we're going to be breaking consistency with a whole bunch of other apps if we change this, and I don't see anything unique enough to our situation to justify doing that.

Also, sliding it over acknowledges that you're no longer in the primary / root screen of this particular navigation interface, and that the most likely screen-switching option for you to invoke now is to go back rather than to switch tasks. That actually factors in in a meaningful way for ergonomic reasons - if we're going to make one of those two buttons easier to hit than the other, the back button ought to be the easier to hit one, since it will indisputably be the more heavily used.

sandwich said:
Having things move around seems much worse to me. Sure, I did get used to the dictionary select button moving in the current version, but that doesn't stop it from being bad UI. The menu button seems a little more important than that. (Maybe if pleco has swipes, I wont actually care if it jumps to a random location .)

The dictionary switch button was a much more dramatic jump, and for much less defensible reasons (trying to keep the position consistent between the search screen and definition screen at the expense of having it not always be consistent within the search screen). This one isn't really a jump at all, just a slight nudge over to make room for another button that's contextually relevant in this screen but wasn't in another one.
 
Top