Tomáš Kafka – #gsoc 2011 notes

Human interaction rants

WordPress for Android app redesign proposal for gsoc 2011

leave a comment »

Short description: I have 3 years experience as a user interface designer and I want to bring the WP Android app on par with Facebook or Twitter clients. Not in terms of covered features, but in terms of fast usability on the go, and cool design giving precedence to content over chrome. Android app should become a companion for blog owners on the go, specialized for tasks and kinds of content that are usually posted on the mobile (think twitter, instagram, posterous). See my concept: http://jdem.cz/k58d4.

Personal Details

Name: Tomáš Kafka

Email: tk@tomaskafka.com

Personal Website: http://tomaskafka.com

Skype ID or GTalk: skype: keff85, gtalk: tk@tomaskafka.com

IRC nick: tomaskafka

Phone number: 00420 720 185 287

School Name: Charles University in Prague

Years completed: 6th

PHP Experience Level: advanced

WordPress Experience Level: developer

Project Description

Link to project description on WordPress-powered blog: https://tomaskafka.wordpress.com/2011/04/08/wordpress-android-app-redesign-proposal-for-gsoc-2011/

Describe your idea in detail: I chose to refresh the UI and user experience of WordPress Android app. Currently, it gets the job done, but I’d like it to become more of an elegant mobile companion of blog owner, instead of does-everything-but-ugly app – see my concept at https://tomaskafka.wordpress.com/2011/04/08/wordpress-for-android-concept-for-gsoc-2011/ .

This particularly means:

  • determining the typical usage for which the UI will be optimized
  • making existing app more usable and suited to mobile scenarios – users on a mobile will typically post very short posts or ‘tweets’ without title, or media like photo with a signle line comment – as opposed to long textual posts that are sent through web
  • sparkle the app with a little details that help users – one such example would be improvement of post editing form
  • approach from a direction of UX designer (think usability), not of a developer (think lots of poorly usable features)
  • don’t overwhelm it with features, especially not with rarely used admin options, that can easily be set up in web interface once in a time when a user needs them

As a UX designer and Android developer experienced with commercial work, I know the importance of going through all phases of UI development:

  • gathering user feedback
  • deciding on design direction
  • many iterative sketches of UI
  • building the protoype of the best viable solution (in wireframing tool – Axure RP)
  • testing the prototype with several users
  • refining the graphic details of the UI
  • implementing the new UI

After reviewing the current code base, I feel that a major refactoring is necessary, to separate business logic, service classes and user interface code. Therefore, a part of my work would be cleaning up the code according to best practices, and splitting it into coherent classes in Model-View-Presenter or Model-View-ViewModel pattern.

At the end, I’d like to document the design tenets that would allow others to continue in development while keeping the interface coherent.

To clarify the scope of my work:

I will analyze the current GUI, user feedback for the app, user groups and use cases.

I will then propose a redesign,bring it through all phases of a good user experience design – sketching alternatives, building protoypes in wireframing tools (Axure RP), test it with several different uses and finally implement new GUI. My further work would be creating new set of graphical resources, coding the new screen layouts and screen flows, and otherwise tweaking the front end.

Given the current state of code, work will have to start with refactoring into MVP or MVVM pattern.

My work will *not* include fixing bugs in the non-GUI code (network implementation, post&media uploads, etc.)

What have you done so far with this idea: I downloaded the app and used it to manage my sample blog site. As no user/designer can represent the whole user base, I analyzed the 160 reviews in Android market and extracted the actionable wishes/complaints. You can find them at https://tomaskafka.wordpress.com/2011/04/07/summary-of-user-reviews-of-wordpress-android-app/ .

Afterwards, I tested well-known apps with similar purpose – posting content from mobile – especially Twitter, Facebook and Posterous app, and mined them for useful UI approaches.

Having done several sketches, I then made a UI concept, to clarify my directions and show of my skills: https://tomaskafka.wordpress.com/2011/04/08/wordpress-for-android-concept-for-gsoc-2011/

My findings from reviews can be summarized as following:

  • Reading
    • Several users expected the app to be a reader app for wordpress.com blogs, this is out of my intended scope (blog owner companion). However, one user wanted to be able to read posts in his blog that were created by other users – this would require a modification of backend to fetch all posts and adding a framework for permissions (so that some of the posts can be just viewed, and others could be edited as well).
      • I suggest keeping the reader part for future improvement, and concentrate on the suggested scope (companion for admin user on the go)
  • Writing
    • text selection is uncomfortable on android, better approach would be the one used in OneNote mobile app, where, when there is no selection and cursor is inside word, hitting ‘bold’ button would bold whole word.
    • users cannot create subheadings – this would be fixed with button that would change the current paragraph to desired heading, or back to paragraph
  • Posting
    • users are confused about the distinction of local and server side drafts – a better solution would’nt require manual uploading of drafts to server, but would make it a part of sync routine
    • several users want to be able to schedule posts – currently app doesn’t offer this
    • several users wanted to be able to set the time of item
    • users want reasonable defaults – especially the status of new post should be set to published (several requests)
    • several users wanted to be able to edit the custom fields, this will be out of scope because it would require dynamic generation of GUI, API support for lists of custom fields for given content type, and implementing all widgets that are available in web version
    • user noticed that editing the title changes permalink – permalinks should have separate field (editable on demand like in the web version)
    • one user complained that geotagging only works when writing a new post. I propose, instead of trying to be smart and failing, to let user assign current location to edited post manually
  • Content types
    • one user wanted the title field to be optional, proving the hypothesis that users want to create different types of content in the mobile app than on the desktop
    • one user wanted support of custom post types – again this is out of scope because of need for dynamicly generated gui
  • Media
    • “the lack of image options requires me to open a browser to resize the uploaded images. Fail.” – this speaks for itself, especially on mobile with slow unreliable connection (consider travellers on the go), there is no need to upload unresized 8px image from the phone camera
    • three different requests for setting one of attached images as featured
    • 2 voices for pulling and attaching the image from wordpress gallery on server
      • This is complicated (would need API for gallery, lot of custom GUI, lot of network transfers), so I think the benefits are not worth the work
      • 2 users wanted to insert pictures into the body of the post. I don’t think that current editor would support it reasonably usable, and Posterous surely knows that. I would keep the text and pictures seperated, like it is now.

I then reviewed the application and came up with my own remarks and ideas for improvement:

  • General design principles
    • clean interface that will concentrate on a typical scenarios, will provide just those interface parts that are necessary, and will allow the advanced users to display the required fields easily
      • for example, when writing post, sections ‘media’, ‘status’ or ‘tags & categories’ can be replaced by a visually light link, that will expand into the full fledged entry forms once clicked; this way, users who just want to fire up a quick post will have a fast way of doing it, without overcluttered interface
      • getting rid of unnecessary visual noise
        • I want to focus on content, and to get rid of all the unnecessary bevels, lines and background colors. Current Twitter app, Facebook client, ore whole Windows Mobile Metro design is a nice example of this.
        • developing a set of universally usable guidelines and straigtening the screen flows
          • for example, the ‘Post Actions’ popup is unnecessary – clicking on the post can open one long scrollable screen, where there would be an editable post (that can also be read comfortably because of very light text field borders), with all the comments underneath (whis will also enable scrolling to see comments during post editation).
            • the option menu would contain delete and share commands, and the option to open the post on the web
            • and altogether, this one screen available with single click could eliminate the unnecessary ‘Post Action’ menu
          • Make the universal screen flow:
            • dashboard, then aggregate view, then detail – all sections can consistently work like this
        • Facebook app style dashboard
        • simplify the use for owners of both single and multiple blogs
          • account switcher in a top right corner of a dashboard – will show the currently selected account and be able to switch accounts anywhere in the application
        • Single notification feed for all the events
          • single stream of time-sorted events for one or all user’s blogs – approve/respond comments, see daily visits, new user registrations…
          • this will be extensible in future and will provide a single screen with everything a blog owner needs to know – kinda like a facebook wall for all your blog accounts
          • instant access to notification list from system status bar or from the dashboard
        • mass operation in gmail app style
          • light checkboxes in front of items, popout menu that shows after checking at least one item
        • UI optimized foreasy posting of content types that are common and comfortable to do on mobile
          • image/photo with a comment, short tweet without title, short text with basic formatting
          • display only necessary basic fields, enable additional fields on demand
        • in areas that are low priority, or for additional options, provide a link to a particular section of admin web UI that will open in browser
  • Writing
    • You can scroll a part of text field or formatting buttons out of view during editing. Better solution would be for text field to become full-screen when it has focus and software keyboard is engaged – scrolling would then scroll just the text field contents, and the formatting bar would be appear fixed above the keyboard. Formatting toolbar is only necessary when editing the wysiwyg fields, so it should only appear in such cases.

Inspiration:

Twitter app

Facebook app

Posterous app (this is the simplest bloggin app I have ever seen, love it!)

Plugin, theme, or core: This will be standalone work on the Android app, and will interface with wordpress only through existing XML-RPC API.

Anticipated challenges: I have checked out the code and tried to read it. To my surprise, it was one big ball of mud, with interleaved backend/network processing and gui manipulations – this would totally require splitting into the UI-agnostic model, and independent views, with MVP or MVVM patterns. I see this as a most important problem, once the code was coded like this with specific screen flow in mind, it will require massive refactoring.

Worst cases are screens dealing with posts – typically, editPost.java or viewPosts.java.

Files like these will need to be refactored into model classes – which would represent the entities and their properties and actions, service classes which handle asynchronous network access, mediators which adapt entity models to the gui, and finally the views.

Fortunately, I have experience of developing quite large Outlook add-in (www.taskconnect.com), where we used the Mode-View-ViewModel pattern to separate the layers of responsibility in an environment quite similar to Android SDK (that was WPF, which shares many conventions with Android’s XML declarative GUI).

Potential mentors: Dan Roundhill, aka mrroundhill – author and maintainer of Android WordPress app, is also listed as a mentor in charge of project. I will happily cooperate with anyone else as well :).

No feedback yet – I found out about GSOC too late, so I only sent Dan an introduction e-mail.

Schedule of Deliverables

Milestones and deliverables schedule:

(previously I have counted wrong number of weeks for GSOC, now it is realigned…)

week: desc.: deliverables:
week 1 user research, evaluating similar apps (twitter, posterous, other blogging and microposting apps), creating a library of useful details and design patterns.deciding upon the design goals research findings, ‘pasteboard’ with pieces of good UI
week 2 creating the use cases for which the app will be optimized,sketching the screen flows and concrete screens, evaluating how natural it feels for given use cases,

start of prototyping

set of final sketches describing the workings of application
weeks 3-4 Refactoring the existing code into model classes that correspond to entities, service classes, model-view mediators, and view.Adapting some existing MVP or MVVM framework.

View should be as loose coupled as possible, to make it easy to change.

clean code with independent UI and business layer
weeks 5-6 writing front end code and UI layouts,developing final graphic assets for one testing screen resolution (probably hdpi) final graphic assets, first changed screens
weeks 7-8 more implementation of UI,adapting the layouts and assets to other screen resolutions (mdpi and ldpi) several screens working in multiple resolutions
weeks 9-10 by this time, basic use cases should work in a new UI (create post, edit post, approve comment) most of the app has a fresh look, there is a lot of edge cases that don’t work that well
week 11-12 some time off to enjoy holiday, reserve buffer
week 13-14 mid-term evaluation, start of small improvements and polishing of details (the other 80 % of work :)) more polished app, comparable with the attached concepts
remaining time feature freeze, debugging, public testing, polishing the existing features and handling the edge use cases tested and working app that is comfortable and easy to use, design manual for further design direction

Other commitments: I am planning to document the design process into my masters degree thesis. Other than that, I am willing to contribute 3-5 days of work per week, depending on circumstances. I am taking only few lectures every week, and I have quit my previous job with enough savings to be able to spend 3-4 months with gsoc & thesis.

Open Source Development Experience

PHP Experience: I don’t think this would be relevant as the work comprises of user interface design and implementation in Java, but anyway: I made living as a PHP/design/html+css+js coding freelancer, http://taskconnect.com/ is my work from design up to programming. Portfolio at http://tomaskafka.com/portfolio/.

WordPress Experience: I have developed a large multilingual website on WordPress with several custom modifications, screenshots can be seen at http://tomaskafka.com/portfolio/ (search for VPN Anonymizer).

Since then, I am interested in development of WordPress user experience, and I try out every new major version – current admin interface is the most friendly one out there.

Other Open Source/Free Software Experience:

My publicly available work

twitter backup script:

http://blog.tomaskafka.com/article/twitter-backup-script-with-url-decoding

StyleSnooper tweaks:

http://jdem.cz/ccew9

Excel 2007 & 2010 addin: Export selection to .CSV & .ARFF

http://blog.tomaskafka.com/article/excel-2007-2010-addin-export-selection-to-csv-arff-weka

I also created multiple larger sites on Drupal CMS and wrote custom modules.

My presentation on Drupal architecture (in czech – overview for my uni class):

http://www.slideshare.net/keff/drupal-cms-prezentace-383853?from=ss_embed

Module that checks for error caused by MySQL server reassiging the user with id=0

http://blog.tomaskafka.com/article/drupal-bugfix-content-from-anonymous-users-disappears

Drupal bug reports:

http://drupal.org/node/300387

http://drupal.org/node/243423

http://drupal.org/node/300387

http://drupal.org/node/641108

Participation in discussions:

http://drupal.org/user/252811/track

Work Experience

Work Experience:

http://www.linkedin.com/in/tomaskafka

Freelance web developer

Designing and programming several mid-size websites based on wordpress and drupal – see eg. http://www.obvysocina.cz , recently built custom CMS with Nette PHP framework http://www.cpi.cz

During studies, me and my friends developed http://www.taskconnect.com – Outlook add-in for managing Team Foundation Server work items (=issues) from Outlook.

This was a self-driven startup, and we focused on clean and extensible architecture. My responsibility was interface design – I helped our team decide upon the implemented feature set, and then took a role of interface designer and developer. This was a project where I learned the full UI design process – sketching variants, creating mockups and interactive prototypes (for this I chose html + jQuery), and then implementing the UI.

I learned about the Model-View-ViewModel architecture, and later educated the rest of team about it (including writing a small sample app where the architecture could be well understood). Afterwards I developed an in-house MVVM framework, which we used to successfully split the view and the model. This enabled automated testing of our business model classes, and quick iterations of UI development (as due to loose coupling, several variations of GUI could be easily designed, and exchanged on the fly without modifying the rest of the code). The UI was well received by the users.

My contribution was 50kloc of C# code and WPF UI definitions.

After this project I was more and more attracted to user interface design, and got a job of UX analyst/designer in http://www.symbio.cz – one of three top creative agencies in Czech Republic. There I analyzed the client’s requirements and created wireframes for enterprise microsites for clients such as Nivea, GlaxoSmithKline, or czech Post Bank. As I am enthusiastic about web 2.0, I wrote company tutorial about integrating with facebook and blog article about inclusive design, where I got to cite Bruce Tognazzini and Jakob Nielsen, my UX gurus.

Half a year later, me and my friends founded http:///www.mobreactor.com, where we now develop entertainment applications for Android.

Apart from work, I read technical blogs every day, and try to not miss any UX/web/mobile dev conference  that happens nearby.

The most wonderful recent experience was IPO48 startup show, where we created two android apps in three days – one was transferring images through sound, other was displaying parts of a longer text in sync with waving the hand, so that the writing ‘hangs in the air’. I immensely enjoyed that – watching an app grow in just three days is a wonderful motivation.

Academic Experience

Academic Institution: Charles University in Prague, faculty of mathematics and physics – Prague, Czech Republic

Current Program: Currently in a last year of masters degree in software engineering.

Anticipated Graduation: 2011

Academic Performance:

I like to keep wide horizons in knowledge – among the courses I enjoyed are eg. datamining, code complete – writing maintainable code, mobile robotics, constraint-satisfaction, planning and scheduling, service oriented architecture (SOA), writing a compiler of Basic-like code into bytecode, artificial inteligence and neural networks, text mining, economy, psychology, and of course UI design.

I study extensively myself from books and blogs – mostly UX and entrepreneurship.

I took last semester off to work full-time as UX designer, as I was always attracted to human-computer interaction, and I enjoy solving real world problems with practical uses.

GSoC for Credit: No

References: contacts excluded from web version

Why WordPress

You’re applying to work with WordPres during GSoC because:

I am fascinated by current development in mobiles – there has been more advances in UI design in last 5 years than in desktop computing in last 15 yrs. Modern touchscreen smartphones become a physical instance of an application, and that’s something completely new and cool, which I want to be part of.

I watched WordPress grow from yet another CMS to the most friendly user experience for both novices and advanced users, and I would like to bring the wordpress app on par with the quality of desktop interface.

And frankly – I always wanted to work an app that fullfills the needs of hundreds of thousands of users, for me this is perfect opportunity.

After GSoC, you envision your involvement with WordPress will be:

I’d like to keep in touch and become a concept designer for WordPress Android app – kinda like what Jon Hicks does for Opera, or Aza Raskin for Firefox.

Advertisements

Written by tomaskafka

April 8, 2011 at 7:44 am

Posted in gsoc

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: