wiki:Projects/Design

Version 61 (modified by Pat Tressel, 10 years ago) ( diff )

--

Design

Table of Contents

  1. AJAX Loader
  2. Switch between an update and read page using JS
  3. Conduct a Usability Test
  4. Suggest a Usability Enhancement
  5. Design a Sahana Eden Theme
    1. What are themes for?
    2. Developing a new theme
    3. Theme examples
    4. For GCI
      1. What to do for this task
      2. A little design philosophy
  6. Design a (better) GUI for the CAP broker (already done?)
  7. Write a blueprint for a GUI (web) tool to build and test XSL files …

AJAX Loader

This is obsolete -- can it be removed?

An AJAX loader/throbber based on the sunflower logo would be really cool

Switch between an update and read page using JS

If the user has the relevant permissions, the read (display) view of a CRUD page should ideally be convertible to an Edit (update) form without needing a full-page refresh. This /could/ be done with an AJAX call, but even better would be to download the form into a hidden Div & hide the read view/open the edit form via a button.

Conduct a Usability Test

  1. Find a person to do be your test subject for the Usability Test. Anyone will do!
  2. Identify a workflow for the usability test on either you own http://eden.sahanafoundation.org/wiki/InstallationGuidelines local instance or a demo site of Sahana,
  3. Write up a report on the Usability Test on the wiki (either as a page or as a attached Document).
    1. What the test subject found easy
    2. What the test subject found hard
    3. What the test subject liked
    4. What the test subject dis-liked
    5. What would you improve in Sahana Eden (even better if you can make these improvements!)

After you the usability document is approved, upload to google docs or dropbox, then add a hyperlink next to the respective task called "(report)" pointing to that document.

For more instructions of how to conduct a usability test from the book "Don't Make Me Think" go to: ​http://www.sensible.com/downloads-dmmt.html

Suggest a Usability Enhancement

  1. Review your own http://eden.sahanafoundation.org/wiki/InstallationGuidelines local instance or a demo site of Sahana.
  2. Identify improvements which could improve the Usability
  3. Check that the improvement has not already been reported by searching the tickets.
  4. Please post each improvement in a separate new ticket.
    • Type: enhancement
    • Keyword: usability + template / demo site you are reviewing
    • Include as many details as possible. If you can design a mockup to attach - even better!

If you are completing this for Google Code In you must suggest 4 enhancements for one task. You may be able to find Usability Enhancement in the Usability Test Reports - just make sure that they haven't been reported already.

Design a Sahana Eden Theme

GCI students doing the "design a theme task", please see the section For GCI which tells what's required for the GCI task. Please read this section and see the Theme examples, but then do what's in the For GCI section. Please, just one of these tasks per student, as they take a long time, and most of what you'll learn will happen during the first try.

See DeveloperGuidelines/Themes

What are themes for?

A theme for a web site provides the "look and feel" of the pages. It gives the overall layout for pages -- it tells where major page elements, like navigation controls, menu bars, side bars, footer, are placed. It specifies colours and backgrounds and logos. Most web sites, Eden included, have several different types of pages that display data from the server's database (the "content") or provide forms and controls for user interaction -- the theme determines the general layout and page elements for each type of page, independent of the actual data shown.

Ideally we're looking for:

  • A new 'base' theme that could be adapted for use by various organizations, and easily built upon foe branding. (That is, organizations will have different branding elements -- logos, color schemes, fonts, etc. -- so it would be good to have a theme that looks good with many sets of branding elements and where colors, backgrounds, etc. could be easily changed.)
    • This should be responsive (e.g. using Twitter Bootstrap as several of our newer themes do)
  • A new 'default' theme which builds upon the base theme with Sahana branding
  • Re-implement some of the existing themes using the new 'base' theme

The design of Sahana Eden could be enhanced greatly with everything from a better colour scheme (for example, the grey menu blends into the browser which is confusing) to making more efficient use of space. If you're more of a web designer than programmer, your input is greatly needed. If you could come up with static designs for the following pages, or programmers can do their thing and make Sahana Eden beautiful. If you can design and program, even better!

Developing a new theme

Think about the purpose for the site for which you're developing a theme.

  • Is it for the public? or for internal use by an organization?
  • Will it be used mainly by people using it for the first time, or infrequently, or by people who will have training or use it frequently?
  • What will be the common operations users need to do?

This distinction might affect what appears in navigation elements -- will users need help and information about the site? or will they need tools to get their work done? It might affect how much decoration and color is used.

The design of the Eden homepage is more controlled by the template than the theme, but it is worth considering as it will be sharing the same CSS that goes with the theme, and may share some or all navigation elements with inside pages. So the layout and contents of the homepage might be taken into account. For instance, a site for internal use may not need a homepage with images and videos that introduce users to the purpose of the site. Instead, users of an internal site might want a practical page, that gives them quick access to tasks they need to do.

The implementation of a theme typically provides CSS and media, but may also include HTML and JS, and even server-side Python code and view code with Python templates, as needed.

Try producing a design for each of these pages -- they cover the main page types in Eden. The links to examples are given to show the type of information that might appear in each, but should not be taken as a restriction on the format you design.

Review the current themes to avoid duplication -- try for something unique. You will need to install an Eden developer environment to see the themes that do not have demo servers. The files for themes can also be found in this directory:

Ensure that elements have consistent design & class/id names and can easily be customized. Use class/id names which are consistent with ​Bootstrap / ​JQueryUI to support easy re-theming. Elements that you may want to customize include:

  • Buttons
  • Menus
  • Tables
  • Popups
  • Tooltips
  • Fonts
  • Throbbers
  • Cards
  • Icons
  • Alerts

Please share your theme code files and any images they need. If you have mockups or anything you'd like to point out about your theme, please include that too.

Theme examples

The ​demo server is using the default theme -- please feel free to make something that looks nothing like it.

Have a look at these sites using Sahana Eden -- you'll see they have very different designs (all are test sites so you can enter test data, if useful, though not all allow full privileges):

This shows a theme that was previously made for this design task. It is an example of what types of files you may need to include -- that is, the actual CSS files and images for the theme, view files, layout file, plus example HTML files and anything you need for fake contents. Please put the design itself entirely out of mind, and Do It Your Way!

Here are the current theme files. (If you have an Eden developer environment installed, you can try them out by editing your models/000_config.py file and setting settings.base.theme to the name of a theme there (same as the name of the directory).)

Among those, these themes use Bootstrap.js:

  • DRMP
  • Philippines

Almost all use jQueryUI.

For GCI

What to do for this task

Returning GCI students: This is not the same task as last year.

This is a good task if you are interested in web design and usability.

The goal of this task is to produce a better theme for the Eden demo:
​http://demo.eden.sahanafoundation.org

What we would like is something that:

  • Gives the user an idea of what Sahana Eden is for, just by seeing the landing page.
  • Has controls on the landing page that have a clear purpose -- the user should not have to read help information to figure out what they are for.
  • Has controls on the landing page that illustrate common uses of Eden.
  • Invites the user to try it out.
  • Looks like it is from the 21st century. ;-)

For this task, you should:

  • Produce an actual Eden theme. You'll be adding a new directory here:
    ​https://github.com/flavour/eden/tree/master/static/themes
    Check with the mentors to pick a good directory name. Eventually, your new theme may replace the default theme.
  • Provide html files for a template. This will go in a new template (or be used in the current default template), but producing a complete template is not part of this task, so you can just add a new template directory here:
    ​https://github.com/flavour/eden/tree/master/private/templates/
    with the same name as your theme directory. Add a "views" subdirectory there -- your new landing page and layout files can go there.
  • Provide a better landing page. This is called index.html, and it goes in the views directory you added above.
    You can see examples of index.html files in many of the templates. The current default template does not have its own index.html file. It is using this one: ​https://github.com/flavour/eden/blob/master/views/default/index.html
  • Provide a better overall page layout. The files for this are layout.html and footer.html.
    You can look at the current default files here:
    ​https://github.com/flavour/eden/tree/master/private/templates/default/views/
    There are also examples in the other templates.
  • Design a better appearance. Try to control the appearance mainly through CSS rather than hard-coding it into the HTML. Look at the other themes to get an idea of what files you need to provide:
    ​https://github.com/flavour/eden/tree/master/static/themes
  • Check that your design works with all the standard page types, e.g. list pages, create pages, etc.
  • You can include more page designs (e.g. module landing pages, dashboards, profile pages) if they are important to your design (or you'd like to show your accomplishments!).

Please read the rest of the information in Design a Sahana Eden Theme.

The examples and demo sites give an idea of what types of data and operations there are -- please feel free to ignore the way they look, where their menus are, etc., and invent your own look and feel.

Be prepared for mentors and community members to critique your design.

Caution: If you use media files (images, video), please be sure they do not have copyright restrictions. You can use images and video from the Sahana web site, ​http://www.sahanafoundation.org, or from other Eden themes. If you want images illustrating a particular event or situation, you can ask on the mailing list if people have images they have taken.

A little design philosophy

Think of the different ways Sahana Eden is used, or could be used. For instance, some of the example sites are for logistics -- managing supplies and transportation, others are for matching donations and requests, or for managing projects, or for managing people, or for responding to emergencies, etc. etc. So there are lots of ways to use Eden. Maybe think of something that could be useful in your community.

If you are designing a theme for an actual deployment, then you would make a style and layout that serves that specific purpose. Think of how people will use the site, and what actions they want to do while there. Use the site purpose to guide your choice of what actions you provide on each page. Use your imagination -- try something unique, but also keep in mind that it should be practical for the users.

If you are making a demonstration theme, then you would want to show a variety of uses. Think of how you could show different types of use without having the landing page appear cluttered or too long.

Part of the design is how active elements like buttons, menus, popups, tabs, cards, spinners, throbbers, etc. are used. What will be convenient for your users? Are there new web technologies that might improve the "look and feel"?

This is partly a learning experience for you, in using CSS and Javascript, JS libraries like Bootstrap and jQuery, new web standards like HTML5. The field that this task is an introduction to is "web design" -- a very popular part of web development and a good thing to know. So this is a good opportunity to try out the tools and techniques.

It's also partly for Sahana -- for you to propose a different way of presenting information, maybe more appropriate than what we have for a particular purpose. Sahana is mainly about getting help to people who need it, so if you can make an advance in usability through your new theme, you're contributing to that goal.

Design a (better) GUI for the CAP broker (already done?)

This is obsolete as written. There is now a CAP template that has most of the UI. Once we have merged Ambar's code from GSoC 2014, we will have a better idea if any UI changes are needed.

PLEASE NOTE: This task seems to be completed, see | Ticket 1026 Proposed by: ​| Nuwan

This is for Common Alerting Protocol (CAP) with capabilities for multi-language alerting and multi-media delivery. Use Agasti CAP Broker as a starting point. (This needs clarification. Eden does not have a CAP broker that I know of. And the current Agasti CAP support is in Krakatoa, not Mayon, so needs to be ported there too. So before there can be a GUI, there would need to be a port or implementation of a CAP broker, no? --Pat)

Specific : Build a ​| wireframe with functionality for the ​| Common Alerting Protocol messaging broker. It should follow a publisher subscriber model. Some specifications are in the ​| CAP Software Requirement Specifications
Measurable : CAP messaging broker is becoming a much sort after tool by many organizations. It is an ITU recommendation. Such tool can be easily adopted by governments and emergency coordination agencies for managing their alerting and situational awareness.
Attainable :
Step 1 :: Study the Sahana Agasti CAP Broker
Step 2 :: document the requirements
Step 3 :: develop the wireframe to provide the required functionality
Step 4 :: run the wireframe through a set of test scenarios, to be documented as stories
Relevant : Part of the Sahana interoperability policy.
Time-bound : Given that the Sahana Agasti CAP broker has much of the functionality it should not take too long to develop the wireframe.
Evaluate : Requirements will be discussed with the Sahana community and a prototype wireframe will be presented.
Reevaluate : Once the wireframe is built on the concluded requirements that will be put to test through the scenario based testing.

Write a blueprint for a GUI (web) tool to build and test XSL files (already done?)

PLEASE NOTE: This task seems to be completed, see | XSLT Blueprint

Proposed by: ​| Nuwan
Although this is classified as a design task, familiarity with coding, and especially with XSL transformations, will be helpful.

Specific : Given that Sahana is use a lot of XML there should be a tool to develop text, html, etc. outputs based one's own XSL transformation file. The user should be presented with the option to select the XML file; i.e. tags and schema, then include/exclude those tags with inserts of fixed text. The user should be able to preview the output. The built XSL file can then be stored to be used for a particular function. In this case it would be producing CAP message based user specific outputs for email, web, rss, twitter, google, etc.
Measurable : This would allow super users to develop implementation specific CAP content delivery outputs.
Attainable :
Step 1 :: research existing available solutions to get a feel for the type of functionality needed
Step 2 :: document and discuss the set of requirements with Sahana community
Step 3 :: develop the wireframe and test it with test scenarios
Step 4 :: document the set of specifications
Relevant : The Irrigation department may want the CAP messages to be formed in one way in an email compared with that of the Health department. A rapid XSL development tool will put the burden of building and maintaining those finals in the hands of the users and implementers and not engineers.
Time-bound :
Evaluate : design requirements and settling on them.
Reevaluate : wireframe with the test scenarios

Note: See TracWiki for help on using the wiki.