I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Any thoughts? I included a tablet mockup using sidebar space for keeping the search/history/saved pages lists open, and also experimented with a 'table of contents' drop-down (not fully pictured). These are just image mockups for now, nothing live or usable. :)
The split-style mockup (with bars at both top and bottom to make more items available) might also be a good base for an iOS design, where we'd need the toolbar space more actively since there's not a standard menu convention.
-- brion
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.org wrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Any thoughts? I included a tablet mockup using sidebar space for keeping the search/history/saved pages lists open, and also experimented with a 'table of contents' drop-down (not fully pictured). These are just image mockups for now, nothing live or usable. :)
The split-style mockup (with bars at both top and bottom to make more items available) might also be a good base for an iOS design, where we'd need the toolbar space more actively since there's not a standard menu convention.
-- brion
I dislike the lighter color of the action toolbar though on mobile (the delineation between content and navigation is cleaner in the current Android app) and the fact that it makes the top toolbar more cluttered. Mostly all I want to do on mobile is search and read, and I think people are used to just scrolling down for more content, not using a TOC dropdown.
Personally I'd prefer the current style, except for in tablet view. I really like the tablet mockup since the lighter style and split screen is great for a device with more real estate.
We should usertest the difference between the two though, if we can. :) They're pretty subtle differences overall, so it might be good to get more opinions. Usertesting.com or usabilla.com?
heh, a user test would be awesome, I was actually going to say the opposite. I love the new style because it blends in a bit more and is a bit of a cleaner for me. The darker one jumps out and 'interrupts' me as I'm reading more.
While I like the table of contents I agree that most people are used to scrolling on their smart phones. Would be interesting if making the TOC more easily accessible though changes that.
James
On Tue, Jan 10, 2012 at 5:27 PM, Steven Walling swalling@wikimedia.orgwrote:
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.orgwrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Any thoughts? I included a tablet mockup using sidebar space for keeping the search/history/saved pages lists open, and also experimented with a 'table of contents' drop-down (not fully pictured). These are just image mockups for now, nothing live or usable. :)
The split-style mockup (with bars at both top and bottom to make more items available) might also be a good base for an iOS design, where we'd need the toolbar space more actively since there's not a standard menu convention.
-- brion
I dislike the lighter color of the action toolbar though on mobile (the delineation between content and navigation is cleaner in the current Android app) and the fact that it makes the top toolbar more cluttered. Mostly all I want to do on mobile is search and read, and I think people are used to just scrolling down for more content, not using a TOC dropdown.
Personally I'd prefer the current style, except for in tablet view. I really like the tablet mockup since the lighter style and split screen is great for a device with more real estate.
We should usertest the difference between the two though, if we can. :) They're pretty subtle differences overall, so it might be good to get more opinions. Usertesting.com or usabilla.com?
-- Steven Walling Community Organizer at Wikimedia Foundation wikimediafoundation.org
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.org wrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Neat. I'm liking that were starting to look closer to what Holo Android users are going to expect
http://android-developers.blogspot.com/2012/01/holo-everywhere.html
Any thoughts? I included a tablet mockup using sidebar space for keeping the search/history/saved pages lists open, and also experimented with a 'table of contents' drop-down (not fully pictured). These are just image mockups for now, nothing live or usable. :)
What about having the toc load from the far right side? During the design guild meeting I was shown an awesome demo where a Wikipedia page had the toc hidden on the side and opened up when the user clicked on the far left. You would then select the part of the article you'd want and it would disappear. It worked great. Sadly the demo of it is down :(
The split-style mockup (with bars at both top and bottom to make more items available) might also be a good base for an iOS design, where we'd need the toolbar space more actively since there's not a standard menu convention.
+1 for iOS
--tomasz
On Thu, Jan 12, 2012 at 3:31 AM, Tomasz Finc tfinc@wikimedia.org wrote:
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.orgwrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Neat. I'm liking that were starting to look closer to what Holo Android users are going to expect
http://android-developers.blogspot.com/2012/01/holo-everywhere.html
There's actually a couple nice screenshots of an SDK sample program that shows what might be another good way to change the layout:
https://developer.android.com/resources/samples/HoneycombGallery/index.html
That's a sample photo-gallery type app that has, in tablet layout, a left column where you select individual items and then the rest of the screen is the photo view. On the actionbar, the first thing after the icon are some navigation selectors where you choose between various categories of things to show in the items list.
We could have a similar layout where the navigation options are search, saved pages, history, and nearby -- then in tablet mode you can keep the list portions open so you can easily get back to them.
In small-screen mode, these could be two separate screens: one with the navigation selectors and the lists, and another with the article view and minimal controls to get you back to the navigation.
-- brion
as I was asked last time and I had no good answer to it: what are the keywords to let one find the the beta version on market? On Jan 13, 2012 12:59 AM, "Brion Vibber" bvibber@wikimedia.org wrote:
On Thu, Jan 12, 2012 at 3:31 AM, Tomasz Finc tfinc@wikimedia.org wrote:
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.orgwrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Neat. I'm liking that were starting to look closer to what Holo Android users are going to expect
http://android-developers.blogspot.com/2012/01/holo-everywhere.html
There's actually a couple nice screenshots of an SDK sample program that shows what might be another good way to change the layout:
https://developer.android.com/resources/samples/HoneycombGallery/index.html
That's a sample photo-gallery type app that has, in tablet layout, a left column where you select individual items and then the rest of the screen is the photo view. On the actionbar, the first thing after the icon are some navigation selectors where you choose between various categories of things to show in the items list.
We could have a similar layout where the navigation options are search, saved pages, history, and nearby -- then in tablet mode you can keep the list portions open so you can easily get back to them.
In small-screen mode, these could be two separate screens: one with the navigation selectors and the lists, and another with the article view and minimal controls to get you back to the navigation.
-- brion
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
On Jan 13, 2012 12:21 AM, "rupert THURNER" rupert.thurner@gmail.com wrote:
as I was asked last time and I had no good answer to it: what are the
keywords to let one find the the beta version on market?
It is not possible to download a beta from the Market.
However, thankfully on Android you can download apps not on the market if you choose to. There are links to use (.apk) in earlier emails to this list, just search the archives.
On Jan 13, 2012 12:59 AM, "Brion Vibber" bvibber@wikimedia.org wrote:
On Thu, Jan 12, 2012 at 3:31 AM, Tomasz Finc tfinc@wikimedia.org wrote:
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.org
wrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the
older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Neat. I'm liking that were starting to look closer to what Holo Android
users are going to expect
http://android-developers.blogspot.com/2012/01/holo-everywhere.html
There's actually a couple nice screenshots of an SDK sample program that
shows what might be another good way to change the layout:
https://developer.android.com/resources/samples/HoneycombGallery/index.html
That's a sample photo-gallery type app that has, in tablet layout, a
left column where you select individual items and then the rest of the screen is the photo view. On the actionbar, the first thing after the icon are some navigation selectors where you choose between various categories of things to show in the items list.
We could have a similar layout where the navigation options are search,
saved pages, history, and nearby -- then in tablet mode you can keep the list portions open so you can easily get back to them.
In small-screen mode, these could be two separate screens: one with the
navigation selectors and the lists, and another with the article view and minimal controls to get you back to the navigation.
-- brion
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Rupert, sorry if we missed your last email.
The beta Android app was, until today, not released on any market. The latest Release Candidate (RC4) was sent to this list earlier this week.
However, there was be a "dark" release today on Android Market, as Tomasz pointed out earlier. Check it out and let us know what you think.
You might have to search by Wikimedia Foundation.
Phil
On Fri, Jan 13, 2012 at 12:20 AM, rupert THURNER rupert.thurner@gmail.comwrote:
as I was asked last time and I had no good answer to it: what are the keywords to let one find the the beta version on market? On Jan 13, 2012 12:59 AM, "Brion Vibber" bvibber@wikimedia.org wrote:
On Thu, Jan 12, 2012 at 3:31 AM, Tomasz Finc tfinc@wikimedia.org wrote:
On Tue, Jan 10, 2012 at 5:11 PM, Brion Vibber bvibber@wikimedia.orgwrote:
I was reading up on Android 3 & 4's 'action bar' (sorta replaces the older menu styles) and got inspired to make some mockups for a layout for the app that might fit in better on Android 3 (Honeycomb) tablets and Android 4 (Ice Cream Sandwich) phones.
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style
Neat. I'm liking that were starting to look closer to what Holo Android users are going to expect
http://android-developers.blogspot.com/2012/01/holo-everywhere.html
There's actually a couple nice screenshots of an SDK sample program that shows what might be another good way to change the layout:
https://developer.android.com/resources/samples/HoneycombGallery/index.html
That's a sample photo-gallery type app that has, in tablet layout, a left column where you select individual items and then the rest of the screen is the photo view. On the actionbar, the first thing after the icon are some navigation selectors where you choose between various categories of things to show in the items list.
We could have a similar layout where the navigation options are search, saved pages, history, and nearby -- then in tablet mode you can keep the list portions open so you can easily get back to them.
In small-screen mode, these could be two separate screens: one with the navigation selectors and the lists, and another with the article view and minimal controls to get you back to the navigation.
-- brion
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
I've added a screenshot of a partial mockup I whipped together, running on my Galaxy Tab:
https://www.mediawiki.org/wiki/Mobile_mockups_for_Android_style#Mockup_for_t... (the second pic is the new one)
This is proposing using tabs to select between 'search', 'nearby', 'saved', and 'history' as navigation options for the left bar, and puts some key things on the action bar as clickable options (read in..., save, and share page), plus the overflow menu. I was too lazy to replicate the proper overflow menu icon so it's showing a settings icon. ;)
Not fully working version is in git, my 'tabs' branch: https://github.com/brion/Wikipedia/commits/tabs
A fair amount of basic tablet-style layout is already landed in master though, as additional CSS and a couple JS tweaks. The Android automatic builds should include a tweak to a sidebar / main two-column layout on large screens, but none of the fancy menus yet.
-- brion