I wrote this critique a while ago of the production version of Shifts - I'll update it to fit the development version and fix the issues (which are mostly CSS based).
"Current Shift Page" at shifts.yale.edu/stcdev/reports/NUM
The top of the page has a two column layout.
The left column contains:
Message Center: Home.
Post a new sticky feature - I cannot seem to write anything.
One possibly conflicting browser extension is Vimium; however, disabling
the extension still does not allow me to type anything. In addition,
there is also a “Missing image" icon when you first click the button.
Underneath, there is a lot of blank unused space.
The right column contains:
Data Objects:
I am not sure what this does; it says "There are no data objects in this location"
Useful Links:
All Active Tasks: Leads to a blank page.
All Data Objects: Leads to a blank page.
Shift Tasks:
"There are no tasks at this time". Does this link to the STC shifts calendar?
Search Google:
This is misleading. I tried to use the feature and nothing happened.
Also, it raises a user error: Will this navigate the current page to Google,
getting rid of the current page [the shift form]? This should be fixed/removed.
Possible design revisions:
Remove "Search Google?”, since opening a new tab will serve the same function.
Condense the 1 item in the left and the 3 items in the right to 2 in each.
Bottom Section:
Update Your Report:
The bold text and shaded background make the sections highly visible.
Possibly make the box 1 column longer/draggable from the bottom right corner to
make it larger? Large blocks of text aren't easy to input but still show up
on the right side correctly, so this isn’t a major issue.
Right side of report:
Good, but the length of the box could possibly be longer so that you
don't have to scroll down so much. This is likely not an issue with smaller
blocks of text (e.g. updating less frequently with smaller messages).
Feature request / Additional Design Features:
"Do you want to leave this page?" This is important in case someone
accidentally closes the page without logging their hours.
5pt padding on each element. For example, move the "Shift Report: 143 Elm"
bar at the top 5pt over so that it is not immediately touching the left
margin. This makes the page more clean and seem not as cluttered.
Same with the Data Objects, Useful Links, etc. There is plenty of extra
space and creating extra whitespace makes it more readable.
It is already implemented (slightly) in the headers of each "Data Objects"
etc but move the navy box itself over 5pt. Same with "Post a new sticky"
as well as "Update Your Report".
This picture may make it more clear:
http://ils.indiana.edu/faculty/hrosenba/www/Workshops/CSS/Demo/space2.gif
In essence, the margin around the text is fine (there is plenty of whitespace
everywhere). We don't have a border around anything, so that's not relevant.
The padding around text is quite small sometimes, however, so increasing that
makes the text more readable and clear to the user.
At the bottom: Move the "For help with Shifts..." over to the center of
the page. It seems to have a better location at the bottom at this link:
http://shifts.yale.edu/stcdev/shifts but that too could be moved over
to left justify it with the left column of the information.
The page seems to be approximately 815 pixels wide; it could be wider, seeing
as most people's minimum screen resolution should be 1366x768 which gives
at least 1100ish pixels of available horizontal screen size.
I wrote this critique a while ago of the production version of Shifts - I'll update it to fit the development version and fix the issues (which are mostly CSS based).
Platform: OSX 10.9 Browser: Chrome 32.0.1700.107 (stable)
"Current Shift Page" at
shifts.yale.edu/stcdev/reports/NUMThe top of the page has a two column layout.
The left column contains: Message Center: Home. Post a new sticky feature - I cannot seem to write anything. One possibly conflicting browser extension is Vimium; however, disabling the extension still does not allow me to type anything. In addition, there is also a “Missing image" icon when you first click the button. Underneath, there is a lot of blank unused space.
The right column contains: Data Objects: I am not sure what this does; it says "There are no data objects in this location"
Useful Links: All Active Tasks: Leads to a blank page. All Data Objects: Leads to a blank page.
Shift Tasks: "There are no tasks at this time". Does this link to the STC shifts calendar?
Search Google: This is misleading. I tried to use the feature and nothing happened. Also, it raises a user error: Will this navigate the current page to Google, getting rid of the current page [the shift form]? This should be fixed/removed.
Possible design revisions: Remove "Search Google?”, since opening a new tab will serve the same function. Condense the 1 item in the left and the 3 items in the right to 2 in each.
Bottom Section: Update Your Report: The bold text and shaded background make the sections highly visible. Possibly make the box 1 column longer/draggable from the bottom right corner to make it larger? Large blocks of text aren't easy to input but still show up on the right side correctly, so this isn’t a major issue.
Right side of report: Good, but the length of the box could possibly be longer so that you don't have to scroll down so much. This is likely not an issue with smaller blocks of text (e.g. updating less frequently with smaller messages).
Feature request / Additional Design Features: "Do you want to leave this page?" This is important in case someone accidentally closes the page without logging their hours.
5pt padding on each element. For example, move the "Shift Report: 143 Elm" bar at the top 5pt over so that it is not immediately touching the left margin. This makes the page more clean and seem not as cluttered. Same with the Data Objects, Useful Links, etc. There is plenty of extra space and creating extra whitespace makes it more readable. It is already implemented (slightly) in the headers of each "Data Objects" etc but move the navy box itself over 5pt. Same with "Post a new sticky" as well as "Update Your Report".
This picture may make it more clear: http://ils.indiana.edu/faculty/hrosenba/www/Workshops/CSS/Demo/space2.gif In essence, the margin around the text is fine (there is plenty of whitespace everywhere). We don't have a border around anything, so that's not relevant. The padding around text is quite small sometimes, however, so increasing that makes the text more readable and clear to the user.
At the bottom: Move the "For help with Shifts..." over to the center of the page. It seems to have a better location at the bottom at this link: http://shifts.yale.edu/stcdev/shifts but that too could be moved over to left justify it with the left column of the information.
http://shifts.yale.edu/stcdev/public_view gives an error message. http://shifts.yale.edu/stcdev/calendar_feeds gives an error message.
The page seems to be approximately 815 pixels wide; it could be wider, seeing as most people's minimum screen resolution should be 1366x768 which gives at least 1100ish pixels of available horizontal screen size.