Suggest redesign of AnkiDroid UI for tablet

[Wisam]

I have some experience working with Photoshop. I have a tablet and I am willing to do design screen shots to improve AnkiDroid experience on Android tablet. Rather than simply re-positioning the buttons I think we can really improve the overall user experience by modifying the layout of Anki and utilizing honeycomb API. I don't know programming but I want to contribute to the project. The design can be something that users can comment and vote on. Then we do multiple revisions after that the devs can go and implement it. 

The best UI example I can see so far is Gmail app for the tablet. It really uses the real estate of the screen to leverage the user experience. Here is simple screen shot to illustrate the download deck section improvement.

Let me know what you think.

Wisam

[Nicolas Raoul]

Great!

I added you as a project member so that you can edit various things on
AnkiDroid's website.
I just created a stub for a tablet design page, could you please use this page?
http://code.google.com/p/ankidroid/wiki/TabletDesign

Thanks a lot!
Nicolas Raoul

> --
> You received this message because you are subscribed to the Google Groups
> "AnkiDroid" group.
> To view this discussion on the web, visit
> https://groups.google.com/d/msg/anki-android/-/U-QtVwJpcyIJ.
> To post to this group, send an email to anki-a...@googlegroups.com.
> To unsubscribe from this group, send email to
> anki-android...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/anki-android?hl=en-GB.
>

[Robert Siemer]

Sounds great.

[Wisam]

Thanks for adding me to the wiki page. The wiki page would serve to provide instructions but I think we can discuss the design here then we put it on the wiki page once we reach an agreement on the final look.

I am thinking of doing a design similar to Gmail for tablet. I really don't know if people use 2-3 decks in Anki or have multiple decks. This design would serve those who have many decks and would facilitate managing them.
I don't claim to be the best designer in Photoshop!

Here is some explanation on the design:

• On the left side there is the main pane (side bar) where it provides links to personal and shared decks. Taping on them would change the menu to the right to bring corresponding window for each. Tapping on the item in the share decks would shift the window to the right thus the left pane is not visible anymore.
  
• To get back you have to click on the small white triangle (or AnkiDroid logo) on the top left. This action is bring visible level Up similar to Windows Explorer rather than the back action at the bottom bar of the screen. Google distinguishes between the two in Android. From there you can get a list of available decks with description on any selected one.
• In Gmail there are four buttons on top. We can think of them like Download deck, share button (if someone wants to share a deck with a friend), trash ..etc These can be really handy. Moving the search bar on top cleans up some space although that's not necessary.
  

The main design relies on cascading windows. The top most is (Personal Decks, Shared Decks, All, categories ...etc) this allows the user to organize decks in groups. So for medical exams, language exams, other stuff the user has the choice to organize them and put a color. If the user clicks on ALL then that would list all decks. Trash is the place when the users deletes a deck it gets moved there. For 30 days if the user takes no action then it gets deleted permanently. People can think of other things to add to the side pane.

I also added FADE IN in the download window which means there is more information below and the user have to keep scrolling up to show it. This is a nice visual cue to have not only here but also in the cards window.

[nobnago]

hi wisam,

thanks for the screenshots. looks really great! i think about maybe
buying a tablet in the next months. then i could start to implement
some of your suggestions...

cheers!

norbert

On 30 Nov., 20:12, Wisam <wisam.alr...@gmail.com> wrote:
> Thanks for adding me to the wiki page. The wiki page would serve to provide
> instructions but I think we can discuss the design here then we put it on
> the wiki page once we reach an agreement on the final look.
>
> I am thinking of doing a design similar to Gmail for tablet. I really don't
> know if people use 2-3 decks in Anki or have multiple decks. This design
> would serve those who have many decks and would facilitate managing them.

> *I don't claim to be the best designer in Photoshop!*
>
> *Here is some explanation on the design:*
>
>    - On the left side there is the main pane (side bar) where it provides

>    links to personal and shared decks. Taping on them would change the menu to
>    the right to bring corresponding window for each. Tapping on the item in
>    the share decks would shift the window to the right thus the left pane is
>    not visible anymore.

>    - To get back you have to click on the small white triangle (or

>    AnkiDroid logo) on the top left. This action is bring visible level Up
>    similar to Windows Explorer rather than the back action at the bottom bar
>    of the screen. Google distinguishes between the two in Android. From there
>    you can get a list of available decks with description on any selected one.

>    - In Gmail there are four buttons on top. We can think of them like

>    Download deck, share button (if someone wants to share a deck with a
>    friend), trash ..etc These can be really handy. Moving the search bar on
>    top cleans up some space although that's not necessary.
>
> The main design relies on cascading windows. The top most is (Personal
> Decks, Shared Decks, All, categories ...etc) this allows the user to
> organize decks in groups. So for medical exams, language exams, other stuff
> the user has the choice to organize them and put a color. If the user
> clicks on ALL then that would list all decks. Trash is the place when the
> users deletes a deck it gets moved there. For 30 days if the user takes no
> action then it gets deleted permanently. People can think of other things
> to add to the side pane.
>
> I also added FADE IN in the download window which means there is more
> information below and the user have to keep scrolling up to show it. This
> is a nice visual cue to have not only here but also in the cards window.
>

>  Download.png
> 151KAnzeigenHerunterladen
>
>  AnkiDroid_DownloadScreen.png
> 165KAnzeigenHerunterladen

[Damien Elmes]

I'd recommend waiting for 2.0 to enter beta before investing too
heavily in any redesign effort, as 2.0 is bringing standard
hierarchical deck management and moving shared deck browsing to
AnkiWeb.

> --
> You received this message because you are subscribed to the Google Groups
> "AnkiDroid" group.
> To view this discussion on the web, visit

> https://groups.google.com/d/msg/anki-android/-/uc9anQh5vBQJ.

[Wisam Al-Rawi]

For decks with not so much text the phone works but I have decks with a large amount of text to explain the answer so I am using the tablet on daily basis as it is easier to read. Good luck Norbert getting a tablet there are good ones coming out with Tegra 3 in few months besides the Asus Transformer Prime.

I think also it is a good idea to wait for Anki beta 2.0

[iniju]

Good timing! I just got myself an Asus Transformer
I'm not familiar with the Honeycomb API, but hopefully it's not too
different than Gingerbread.

I like your designs, hope I can get some time to work on implementing
them.

On Dec 1, 2:37 pm, Wisam Al-Rawi <wisam.alr...@gmail.com> wrote:
> For decks with not so much text the phone works but I have decks with a
> large amount of text to explain the answer so I am using the tablet on
> daily basis as it is easier to read. Good luck Norbert getting a tablet
> there are good ones coming out with Tegra 3 in few months besides the Asus
> Transformer Prime.
>
> I think also it is a good idea to wait for Anki beta 2.0
>
>
>
>
>
>
>
> On Wed, Nov 30, 2011 at 9:54 PM, Damien Elmes <reso...@ichi2.net> wrote:
> > I'd recommend waiting for 2.0 to enter beta before investing too
> > heavily in any redesign effort, as 2.0 is bringing standard
> > hierarchical deck management and moving shared deck browsing to
> > AnkiWeb.
>

[Wisam]

Awesome. Lucky you. I feel my Galaxy Tab is so outdated!

Glad you like the design. I will try to work out to add more details / explanation.