= Design = [[TOC]] == AJAX Loader == 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 [wiki: http://eden.sahanafoundation.org/wiki/InstallationGuidelines local instance] or a demo site of Sahana, * if you using your own local instance - consider testing the following [wiki:DeveloperGuidelines/Templates Templates]: * default * IFRC (in {{{/models/000_config.py}}} change [wiki:DeveloperGuidelines/PrePopulate prepopulate] to {{{settings.base.prepopulate = ["IFRC_Train"]}}} * DRMP * DRPP * CRMT * Philippines * The following demo sites are available: * http://demo.eden.sahanafoundation.org/eden/ (Template = default) * http://demo.lacrmt.sahanafoundation.org/ (Template = CRMT) * http://demo.drm.tl/ (Template = DRMP) * http://demo.drrprojects.net/ (Template = DRRPP) * These workflows will apply to the default template and some of the others. You are welcome to test a different workflow - it should be something that takes you ~5min (the test subject will take longer!). Make sure that you document the workflow in the test report and add it here: * Add a Volunteer * [https://docs.google.com/document/d/1u8V2lclsVtndJ0UghZA2dNSBmLsJBYrxCwZVsLU2Jdo/edit | Test Report 1] * Add an Office * [https://docs.google.com/file/d/0B2PnIiu7h_z6a0EyV3FNeTVmYUk/edit|Test Report 1] * Send an Item from a Warehouse * [https://docs.google.com/document/d/1wX-2x85ppokQDw054Lu5kcg1Gqf63lsjV1ifq2puQFs/edit | Test Report 1] * Add an Asset and assign it to a Volunteer * [https://docs.google.com/file/d/0BxfWSHILMd6gU1V3Vi02Z3lGb0k/edit | Test Report 1] * View Staff on the Map 1. 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 1. What the test subject found hard 1. What the test subject liked 1. What the test subject dis-liked 1. 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 [wiki: http://eden.sahanafoundation.org/wiki/InstallationGuidelines local instance] or a demo site of Sahana. * if you using your own local instance - consider testing the following [wiki:DeveloperGuidelines/Templates Templates]: * default * IFRC (in {{{/models/000_config.py}}} change [wiki:DeveloperGuidelines/PrePopulate prepopulate] to {{{settings.base.prepopulate = ["IFRC_Train"]}}} * DRMP * DRPP * CRMT * Philippines * The following demo sites are available: * http://demo.eden.sahanafoundation.org/eden/ (Template = default) * http://demo.lacrmt.sahanafoundation.org/ (Template = CRMT) * http://demo.drm.tl/ (Template = DRMP) * http://demo.drrprojects.net/ (Template = DRRPP) 2. Identify improvements which could improve the Usability 3. Please post each improvement in a ''separate'' [/newticket 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 [#ForGCI 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, but then do what's in the [#ForGCI For GCI] section.''''' See [wiki:DeveloperGuidelines/Themes] 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 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! Try producing a design for each of these pages -- they cover the main page types in Eden: * Home Page - http://demo.eden.sahanafoundation.org/eden/ * [http://eden.sahanafoundation.org/attachment/wiki/ProjectInformation/Sahana%20Eden%20-%20Home.jpg] * Dashboard - http://demo.eden.sahanafoundation.org/eden/org/index * [http://eden.sahanafoundation.org/attachment/wiki/ProjectInformation/Sahana%20Eden%20-%20Dashboard.jpg] * List View - http://demo.eden.sahanafoundation.org/eden/project/activity * [http://eden.sahanafoundation.org/attachment/wiki/ProjectInformation/Sahana%20Eden%20-%20List.jpg] * List Add View - http://demo.eden.sahanafoundation.org/eden/org/organisation (requires login) * [http://eden.sahanafoundation.org/attachment/wiki/ProjectInformation/Sahana%20Eden%20-%20List%20Add.jpg] * Component View - http://demo.eden.sahanafoundation.org/eden/org/organisation/8/office * [http://eden.sahanafoundation.org/attachment/wiki/ProjectInformation/Sahana%20Eden%20-%20Components.jpg] * Review CSS & layout.py for different themes to avoid duplication -- try for something unique. * Ensure that elements have consistent design & class/id tags and can easily be customized * Buttons * Tables * Popups * Fonts * Throbbers * Use class/id tags which are consistent with [http://twitter.github.com/bootstrap/ Bootstrap] / [http://jqueryui.com/ JQueryUI] to support easy re-theming. Please share your CSS and HTML 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 === === Examples === The [http://demo.eden.sahanafoundation.org 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 designs (all are test sites so you can enter test data if-useful): * Community Resilience Mapping: http://demo.lacrmt.sahanafoundation.org * Disaster Risk Management: http://demo.drm.tl * Disaster Risk Reduction Projects: http://demo.drrprojects.net * Donation & Volunteer Management: http://la.aidiq.com * Philippines request Management & Facility Status: http://test.philippines.sahanafoundation.org * Resource Management for IFRC (login required to get beyond frontpage): http://rmsdemo.aidiq.com 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, 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! * http://eden.sahanafoundation.org/attachment/wiki/Contribute/UI/Sahana%20Eden%20Layout%20Design.zip 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).) * https://github.com/flavour/eden/tree/master/static/themes Among those, these themes use Bootstrap.js: * DRMP * Philippines Almost all use jQueryUI. == Design a (better) GUI for the CAP broker (already done?) == PLEASE NOTE: This task seems to be completed, see [http://eden.sahanafoundation.org/ticket/1026 | Ticket 1026] Proposed by: [http://lirneasia.net/profiles/nuwan-waidyanatha | 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 [http://sixrevisions.com/user-interface/website-wireframing/ | wireframe] with functionality for the [http://www.incident.com/cookbook/index.php/Welcome_to_the_CAP_Cookbook | Common Alerting Protocol] messaging broker. It should follow a publisher subscriber model. Some specifications are in the [http://lirneasia.net/wp-content/uploads/2009/05/Sahana-CAP-Msg-Mod-v0.2.pdf | CAP Software Requirement Specifications] [[BR]] '''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. [[BR]] '''Attainable : ''' [[BR]] Step 1 :: Study the Sahana Agasti CAP Broker [[BR]] Step 2 :: document the requirements [[BR]] Step 3 :: develop the wireframe to provide the required functionality [[BR]] Step 4 :: run the wireframe through a set of test scenarios, to be documented as stories [[BR]] '''Relevant : ''' Part of the Sahana interoperability policy. [[BR]] '''Time-bound : ''' Given that the Sahana Agasti CAP broker has much of the functionality it should not take too long to develop the wireframe. [[BR]] '''Evaluate : ''' Requirements will be discussed with the Sahana community and a prototype wireframe will be presented.[[BR]] '''Reevaluate : ''' Once the wireframe is built on the concluded requirements that will be put to test through the scenario based testing. [[BR]] == 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 [http://eden.sahanafoundation.org/wiki/BluePrintXSLTEditor | XSLT Blueprint] Proposed by: [http://lirneasia.net/profiles/nuwan-waidyanatha | Nuwan][[BR]] 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. [[BR]] '''Measurable : ''' This would allow super users to develop implementation specific CAP content delivery outputs. [[BR]] '''Attainable : ''' [[BR]] Step 1 :: research existing available solutions to get a feel for the type of functionality needed [[BR]] Step 2 :: document and discuss the set of requirements with Sahana community [[BR]] Step 3 :: develop the wireframe and test it with test scenarios [[BR]] Step 4 :: document the set of specifications [[BR]] '''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. [[BR]] '''Time-bound : ''' [[BR]] '''Evaluate : ''' design requirements and settling on them. [[BR]] '''Reevaluate : ''' wireframe with the test scenarios [[BR]]