One of the major concerns that I hear in my job is that school teams are not sure how exactly to proceed in the planning process. I am in the process of trying to design tools for educators and administrators that will help simplify the process of school success planning and implementation, amd I am obsessed by the design of web resources.
Currently, I am working on my webpage for our school board's portal, and I am trying to make decisions about what information it should contain, and how it should be organised. To begin with I would like to gather some of the tools that are already available online and make them available to users in a more logical and coherent manner, relative to the Success Plan document. I have already collected the tools and links for my own work; I would now like to make those tools available for the people that I am working with, but in a meaningful and useful way!
And then I came accross this site. Intended as a program for This site inspired me to plan a little bit more before I completely implement my design. I think I still have a ways to go before I come up with something that is truly useful. In the mean time, I will use this site as an example of effective design, in order to help me better understand what that means. From an instructional design perspective, this is a great site. Clear, concise, and easy to understand, the site conveys the information that it needs to without too much extraneous information.
DIBELS is a system for reading comprehension testing. The page has a clear title, followed by a simple graphic situating the reader. The graphic highlights the grade levels and time of year that is being addressed in this area of the site. The reader immediately sees suggested dates for testing, and that testing is expected to take place over a range of two years.
This information is conveyed very effectively through use of a simple table and a single colour to make it stand out from the rest of the page. Easy and effective, visually engaging - the reader can understand what is being communicated wihtout
DIBELS page sample 1. Calendar illustrates implementation period.
This is followed by a button in a contrasting colour. The button links to a video demonstration of the principles in action. Before any explanations are given, before the authors delve into terminology, the reader has a chance to situate themselves in process and gain a better understanding of what is being discussed. This gives them a framework in which to situate the rest of the content they will encounter.The reader is then given guidelines for administration of the test, and they are provided with a link to help them further refine their understanding. This prevents extraneous information from cluttering the page, and allows the reader to clarify their understanding of what is being said.
DIBELS page sample 2. Administration periods and technical info.
A brief desciption of the technical aspects of that particular test follows. I like the inline references to clarify for the reader why and how this test is effective. It provides a starting point for the reader to further research claims about the tool's efficacy.Finally, at the bottom of the page, is some simple iconography, consistent throughout the site. This adds some colour without being too distracting, and draws attention to the further resources that are available to users. I like the fact that the colours are consistent and unified.
DIBELS page sample 3. Graphics remain consistent throughout the site.
Overall, a great site in terms of design. Simple, logical and coordinated, and relatively straightforward. Lots of ideas for me to take into consideration as I continue to design my site.
The DIBELS Initial Sounds Fluency Page