Biblioteca Project Wireframe/Mockups Version 2. These are hybrid mockups…a combination of...

9
Biblioteca Project Wireframe/Mockups Version 2

Transcript of Biblioteca Project Wireframe/Mockups Version 2. These are hybrid mockups…a combination of...

Page 1: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Biblioteca Project

Wireframe/MockupsVersion 2

Page 2: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be perfect in the examples, but will be in the final design

Documents are located by applying successive levels of filters. As each filter is applied, any document not within the selected topic or sub-topic is filtered out of the display

Documents may also be located using the search box. As the user types, documents with the combination of letters as they are entered are returned, thus as you type “Metodología” each successive letter narrows the results to only those titles with words that contain the letter combination, e.g.: M: mecanismos, mejoramiento, metodologías, medios, diagrames, desempeño, documentales

ME: mecanismos, mejoramiento, metodologías, medios, diagrames, documentales

MET: metodologías

Biblioteca Project General Notes

Page 3: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Biblioteca Landing Page: Not logged inNotes: All users will login to use the library. If a user doesn’t already have a users name and password the will follow the link to register with the site.

Page 4: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Biblioteca Landing Page: Post loginNotes: Once the user logs in the welcome and logout links in the upper right corner. The search box immediately filters results by any name in a resource title as you type. Combined with the filtering system, this is a more powerful approach than keywords.

Page 5: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Sample: Level 1 Reorganización institucionalNotes: Once a user selects a main category, all documents for that category are returned. Each successive choice further filters the results.

Page 6: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Sample: Level 2 Reorganización institucionalNotes: This example shows the results when one of the first three sub-filters is selected. Sub-filters are displayed only documents that fall under that filter are returned.

RepresentativeIcon…please seefinal versions

Page 7: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Sample: Level 3 Reorganización institucionalNotes: This example shows the results when the third level of filters is applied. Only the document s for that specific level are displayed.

RepresentativeIcon…please seefinal versions

Page 8: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

Document titles and descriptionNotes: Ideally, the resource title will be more descriptive than the resource file name

Sample of recommended approach to document titles and descriptions

Resource behavior: When a user clicks the title of a document (e.g., a PDF) the document will

open in a new window. Standard document controls will apply, so a user may save or print a

document Video files will also appear in a new window. If desired, the link can be a

direct link to the video on SETEC’s YouTube channel or the YouTube video can be embedded in a page with styling similar to the site

Page 9: Biblioteca Project Wireframe/Mockups Version 2.  These are hybrid mockups…a combination of wireframe and mockup. For this reason, alignment may not be.

How to organize documents for importBest practice outlined below.

To add the documents into the CMS, we’ll need first to have the documents organized according to the taxonomy. Many clients choose to list documents in a spreadsheet which includes: The actual file name, e.g.:

MetodologíaMejoramiento-Chihuahua.pdf. A user-friendly display name, e.g.:

Metodología de Mejoramiento del Desempeño Para Fiscalía en el Estado de Chihuahua

An optional Description: The description is useful to help users know more about the document before selecting it. It’s best if use is consistent: either use descriptions for most resources, or don’t use descriptions for any.

Most clients also organize documents within folders or zip files indicating where the resources fit in the structure, e.g.,:

Difusión-Campañas-Documentales