wiki:Projects/Design

Version 51 (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. For GCI
      1. A little philosophy
      2. What to do for this task
    4. Theme examples
  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. The full construction of theme CSS files plus sample pages, described in this section, was too large, so we've cut it down. 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.

For GCI

For this task, you do not need to make a theme that can be used directly in Eden (though you certainly can if you want, and if you already have an Eden development environment, this is certainly an option to consider). Rather, you can make a few pages representing a mock web site, to show how you want your site to appear and behave. The pages should have functioning widgets (e.g. menus, buttons, popups), though they don't have to submit forms or open other pages. Try to control the appearance mainly through CSS rather than hard-coding it into the HTML.

Please read the rest of the information in Design a Sahana Eden Theme, but keep in mind that it is written for designing an actual set of theme files for use in Eden, not a mockup, so will include things not needed here.

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.

A little philosophy

Think of a specific purpose for your site. 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.

Then 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.

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.

What to do for this task

Please read the whole Developing a new theme section.

Since this is a theme, the page layouts, navigation elements, colors, and user interaction are the most important part.

Make three pages of different types, one each from the three sets of options that follow. See the list of page types in the Developing a new theme section, which points to examples of each kind of page. Again, ignore the "look and feel" of those examples -- just look at the sort of data they are trying to display.

  • Either a homepage, or a dashboard for some type of resource, e.g. projects, or people, or organizations, or...
  • A page that shows information for a single resource, such as one project or one organization. Examples of such pages are the component view pages or the profile pages, but you can invent another way to show the information.
  • Any other type of page, e.g. a create form or list view.

You can include more pages if they are important to your site's purpose (or you'd like to show your accomplishments!).

Use active elements like menus, buttons, popups, etc. If it's important to the theme, have the active elements do something. (For instance, if you want to try a page with tabs for components, make clicking the tabs change which tab's data is shown. If you use a checkbox to show or hide options, have checking it actually show or hide the options.)

You don't need to include a lot of fake data. For instance, if you make a list view, there's no need to have more than two rows. If you make a component view that has tabs, you don't need a lot of tabs. Just include enough to show the layout you want for the page that contains the tabs, and for the info in each tab. If you want to try bootstrap "cards", just put one or two in each card container.

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.

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.