I had to finish it because we have a deadline on when it had to be out or else there are more thing I would have kept doing and never felt like I was done.. but this is the first like its kind in my community of users I train and I would love to hear any feedback, suggestions, and or ideas on how I can improve not only this one but ones I do moving forward.
Remove or disable the previous button on the first slide (do you need these at all)
I am not sure what value there is for the ethics having a hover state but the menu items themselves do not, I would try and ensure anything that can be interacted with does have a hover state but not items that cannot.
The next button at the end of data standards doesn't do anything, I also found the navigation here confusing, there were back and previous buttons on the slide and on the player I got a little lost.
The screen shot for share point is poor quality, try capturing at the size of the player, use pngs or gifs and not jpgs.
On the ethics basics(I got lost here again and found previous doesn't work after clicking next) the hover effects the fonts are all different sizes, also the hover effects are very instant perhaps add an animation or transition. Not sure why text animates in on one and not the others.
There is a section type in my name, why? Also you have a box on the slide to return to the menu, but why doesn't the next button work.
I liked the slider on history, and the whole interaction here, the navigation works well. The image quality could be better try to remove the background better as you have artefacts.
The numbers would look better as circles not ovals and align the text correctly.
Again here the next button stops working.
The privacy section all looks a bit odd and again it is easy to get lost.
The security section again navigation is confused, the text items look to be either different fonts, sizes and some are emboldened, the boxes should be the same size.
Align the arrows on the menu screen.
Overall I think the big problem is the navigation, either have next/prev buttons or don't. I think int would look better with a cleaner design, more images and less colour, choose two fonts and stick to them, handwriting style fonts are never good for headings.
I am really sorry if this sounds overly critical, this is the feedback I would expect to get from a client. You have also been very brave putting something out there and asking for comments. I put my first course on here and learnt loads from the feedback
OMG thank you so much!! Not critical at all, exactly what I was hoping for, tons of things I can do to make improvements. The navigation is something I definitely struggle with, not wanting to only use next and previous but but not feeling confident in the directions I am trying to get people to go. Again really thank you so much!
Navigation is where you can make it very easy for a user or very hard, my first storyline course was confused and it was easy to get lost.
I would try to show the user where they are at anytime and also show them how they can get back to where they started from, and ideally show the user how much they have completed.
This can just be as easy as having a consistent way of navigating a course.
Where I think you get confused is that some screens have buttons that lead to there places but there is no sense of how to get back. I would look at where possible making it so the user does not have to come back to press the next navigation button, this is where tabbed interactions are great because the user can move onto the next without having to close the previous one.
One other way of doing this is giving them a choice and perhaps adding onscreen navigation buttons. I have quickly mocked up an example for you here:
Here is the file it shows that which ever button they only need to press close once but can see all the content, it gets away from the click open => Click Close, Click open => Click close problem.
Try to design the navigation so the user does not get to buried perhaps they are only ever one level away from the main menu.
First of all thank you so much for taking the time to give me critiques, it was exactly what I needed to help. I literately printed off your suggestions and went though my training and "checked" them off as I made as many changes as I could without feeling like I had to completely redo chunks of the training. The wall that I am hitting is that my boss is not e Learning guru so all of here advice is more about grammar and not so much functionality so really really again, thank you so much. I love that I have the opportunity to get into creating e learning's and as I start new in my community I want to leave my users with a positive taste in their mouths rearguards to my online training's.
I have till tomorrow at noon to finish and send it out to my users so my boss is going to get back with me in the morning if there is anything major she thinks need to be changed but for the most part its pretty final and you can see it here:
You’re braver than I am to put your work out there for a peer critique so well done! Most of my advice focuses on the visual/graphic design aspect of the course. Knowing that you have an impending deadline I wouldn’t expect you to have the time to address most of my comments but hopefully something I say might be useful for any future courses.
Overall comments:
Navigation is very complicated and I finished the course wondering whether I had viewed everything that I was supposed to. Before building your next course consider creating a site map that gives you an overview of the structure. It might help to see where the navigation could be improved.
You rely heavily on roll overs throughout your course. If any of your users will be viewing the course on a tablet device this might not be ideal and they might miss some of your content. If you aren’t concerned about this, it might still be worth adding an instruction to let people know that they need to roll over the buttons for more info.
I have an urge to add more structure to the layout, I would:
Consider laying your content out using a grid system to create order.
Align text and images where possible to neaten things up.
Use centrally aligned text less as personally I think it can look untidy.
Consider reducing the font sizes used. This will help create some breathing space around the visual elements and might help the user focus as currently I find it difficult to know where to start on some of the screens.
Use font sizes/styles consistently, use a specific size/style for headings, another for body copy etc.
Main menu:
A lot of people find white text on a black background uncomfortable to read on screen (I’m one of them). It seems to burn the image in to my eyes for a short time so that when I look away from the screen I can still see the image. I think the dotted background adds to this overly busy look.
Module 6 button has a jump on hover. Fixing little bits like this can make your course look a more professional and in turn more credible.
Introduction:
When I read text on screen I follow what I am reading with my cursor, to keep my place. I found it frustrating that when doing this on the introduction screen that the roll over content changed, due to the other hit states being active behind the text panels.
History section:
I would disable the numbered buttons once they’ve been clicked as clicking them again and again replays the animation without any added value.
Additional comments:
It isn’t obvious that you have to use the 'Module 6 Complete' button at the bottom to navigate back to the Main menu.
I would highlight the selected number and remove the corresponding number from the reveal text.
Image quality here isn’t good enough. Suggest either replacing with a better quality version or reducing the size of this one to improve its quality.
The yellow button on the base layer is clickable when this reveal is open.
Operational responsibilities button text jumps on hover.
Make title bold
Indent the text on the numbered list (as I've done here) and consider giving the numbers a colour to make them stand out.
Thank you for taking the time to go through and give me advice! I was for sure nervous about posting it but I want to get better and I am just not going to do that asking my co workers what they think when they can't really tell me what looks or feels off and give me actual suggestions on how it could improve, so I take any help I can get from people who have more experience then I!
I already have to submit this today so I made as many of the changes you suggested but I wont be able to make them all yet to publish. I am sending it out in waves to my users so that if there are things that come up needed to be changed they can let me know so I plan to make the rest of your suggested changes before the next publication.
I really really appreciate your suggestions, thanks for taking the time!
Based on some of the things you said I have some general questions that would be good to know moving forward if you don't mind:
1.) One of the things I know I need to get better at is the Visual/graphic design and I would like to be doing more activities and using pictures. All that being said I do not have a instructional, graphic, or any design back ground. Would you have any suggestions on improving those skills without having to go back to school for that type of work?
2.) I know navigation is one of my main weak points, it just feels like I have an idea in mind for what I want and it ends up now flowing like i had imagined. I have never head of 'creating a site map' or 'using a grid system' before, would you mind explaining what that means and maybe showing me an example of what they looks like or where I could see one?
I have seen some of the work you have done and you are great, I am SO GRATEFUL to have received your input!
It was my pleasure to look through what you developed and offer some feedback, I’m really pleased that you found it useful.
In answer to the additional questions you asked I’ll try to give the best responses I can, apologies for the long-winded reply!
Your instructional design skills are likely to improve with every course you develop. The main thing that will ensure that this is the case is that you are willing to ask for advice and are happy to consider feedback from others. It might be worth setting up a questionnaire for your users to ask what they like/dislike about the course and whether they have any suggestions for future developments. You don’t have to act on all of their comments but they might bring up one or two things that you hadn’t thought of. It sounds as though you're doing this already in a way by drip-feeding the content in to your user base.
Another really popular way to hone your skills is via the E-Learning Challenges. The subject matter is varied and the community is always there to provide feedback, giving you another opportunity to pick up some tips.
In my opinion, to improve graphic design skills you need to practise a lot and always take the time to see what is going on around you. Yes, look at the work of others online but try to get away from your computer to look at design books and magazines, for me some of the very best graphic design happens in the print world. I think that this happens because unlike the countless iterations that it is possible for us to create in our digital work, print designers have to get it right quicker, which in turn focuses their minds and skills. This is certainly where I take a lot of my inspiration from.
The layouts alone in the magazines might give you some great ideas for laying out your course content. Some of the infographics designed for print are sublime, my theory is that the designers have a limited amount of space to use so they have to use it well and really only use the info that is most relevant. I find a lot of the infographics online aren’t nearly as well-designed, probably because the designers don’t need to cut any data, they just keep scrolling until they’re done.
The site map, or blueprint for your course is useful to show how your screens interconnect. It should also help you identify any screens that don’t have a back button for example or ones that are difficult to find. Once you know where these screens are you can decide whether it works or whether you want to make any modifications. Here's a brief overview of how they can be used for web design, the principles are the same for e-learning, specifically the Flow chart section: http://ucm.rutgers.edu/web-ecommunications/information-architecture-wireframes
11 Replies
Hi Tina
Some feedback below:
Remove or disable the previous button on the first slide (do you need these at all)
I am not sure what value there is for the ethics having a hover state but the menu items themselves do not, I would try and ensure anything that can be interacted with does have a hover state but not items that cannot.
The next button at the end of data standards doesn't do anything, I also found the navigation here confusing, there were back and previous buttons on the slide and on the player I got a little lost.
The screen shot for share point is poor quality, try capturing at the size of the player, use pngs or gifs and not jpgs.
On the ethics basics(I got lost here again and found previous doesn't work after clicking next) the hover effects the fonts are all different sizes, also the hover effects are very instant perhaps add an animation or transition. Not sure why text animates in on one and not the others.
There is a section type in my name, why? Also you have a box on the slide to return to the menu, but why doesn't the next button work.
I liked the slider on history, and the whole interaction here, the navigation works well. The image quality could be better try to remove the background better as you have artefacts.
The numbers would look better as circles not ovals and align the text correctly.
Again here the next button stops working.
The privacy section all looks a bit odd and again it is easy to get lost.
The security section again navigation is confused, the text items look to be either different fonts, sizes and some are emboldened, the boxes should be the same size.
Align the arrows on the menu screen.
Overall I think the big problem is the navigation, either have next/prev buttons or don't. I think int would look better with a cleaner design, more images and less colour, choose two fonts and stick to them, handwriting style fonts are never good for headings.
I am really sorry if this sounds overly critical, this is the feedback I would expect to get from a client. You have also been very brave putting something out there and asking for comments. I put my first course on here and learnt loads from the feedback
Hope this helps.
OMG thank you so much!! Not critical at all, exactly what I was hoping for, tons of things I can do to make improvements. The navigation is something I definitely struggle with, not wanting to only use next and previous but but not feeling confident in the directions I am trying to get people to go. Again really thank you so much!
Navigation is where you can make it very easy for a user or very hard, my first storyline course was confused and it was easy to get lost.
I would try to show the user where they are at anytime and also show them how they can get back to where they started from, and ideally show the user how much they have completed.
This can just be as easy as having a consistent way of navigating a course.
Where I think you get confused is that some screens have buttons that lead to there places but there is no sense of how to get back. I would look at where possible making it so the user does not have to come back to press the next navigation button, this is where tabbed interactions are great because the user can move onto the next without having to close the previous one.
One other way of doing this is giving them a choice and perhaps adding onscreen navigation buttons. I have quickly mocked up an example for you here:
http://elearninglaboratory.articulate-online.com/8281437864
https://www.dropbox.com/s/ndyf45iuhhck15g/Tab%20example.story?dl=1
Here is the file it shows that which ever button they only need to press close once but can see all the content, it gets away from the click open => Click Close, Click open => Click close problem.
Try to design the navigation so the user does not get to buried perhaps they are only ever one level away from the main menu.
Phil,
First of all thank you so much for taking the time to give me critiques, it was exactly what I needed to help. I literately printed off your suggestions and went though my training and "checked" them off as I made as many changes as I could without feeling like I had to completely redo chunks of the training. The wall that I am hitting is that my boss is not e Learning guru so all of here advice is more about grammar and not so much functionality so really really again, thank you so much. I love that I have the opportunity to get into creating e learning's and as I start new in my community I want to leave my users with a positive taste in their mouths rearguards to my online training's.
I have till tomorrow at noon to finish and send it out to my users so my boss is going to get back with me in the morning if there is anything major she thinks need to be changed but for the most part its pretty final and you can see it here:
http://austinecho.org/wp-content/uploads/articulate_uploads/Ethics_Refresher_201519/story.html
Thank you for your time, I really do appreciate it!
Hi Tina
Glad it helped a little, I learnt so much by posting my first examples here.
This looks so much better, I would still align the ticks on the menu.
The navigation is much easier to understand, before I felt like I missed a lot of content and now realise I didn't I saw it all. well done!
Hi Tina,
You’re braver than I am to put your work out there for a peer critique so well done! Most of my advice focuses on the visual/graphic design aspect of the course. Knowing that you have an impending deadline I wouldn’t expect you to have the time to address most of my comments but hopefully something I say might be useful for any future courses.
Overall comments:
Main menu:
Introduction:
When I read text on screen I follow what I am reading with my cursor, to keep my place. I found it frustrating that when doing this on the introduction screen that the roll over content changed, due to the other hit states being active behind the text panels.
History section:
Additional comments:
It isn’t obvious that you have to use the 'Module 6 Complete' button at the bottom to navigate back to the Main menu.
I would highlight the selected number and remove the corresponding number from the reveal text.
Image quality here isn’t good enough. Suggest either replacing with a better quality version or reducing the size of this one to improve its quality.
The yellow button on the base layer is clickable when this reveal is open.
Operational responsibilities button text jumps on hover.
Back button obscures part of the graphic.
Hopefully you can follow my long-winded feedback!
I aligned the ticks, thanks, I completely missed that!
Very many thanks for your time and expertise, I am eternally grateful!
Tina
Hey David-
Thank you for taking the time to go through and give me advice! I was for sure nervous about posting it but I want to get better and I am just not going to do that asking my co workers what they think when they can't really tell me what looks or feels off and give me actual suggestions on how it could improve, so I take any help I can get from people who have more experience then I!
I already have to submit this today so I made as many of the changes you suggested but I wont be able to make them all yet to publish. I am sending it out in waves to my users so that if there are things that come up needed to be changed they can let me know so I plan to make the rest of your suggested changes before the next publication.
I really really appreciate your suggestions, thanks for taking the time!
Based on some of the things you said I have some general questions that would be good to know moving forward if you don't mind:
1.) One of the things I know I need to get better at is the Visual/graphic design and I would like to be doing more activities and using pictures. All that being said I do not have a instructional, graphic, or any design back ground. Would you have any suggestions on improving those skills without having to go back to school for that type of work?
2.) I know navigation is one of my main weak points, it just feels like I have an idea in mind for what I want and it ends up now flowing like i had imagined. I have never head of 'creating a site map' or 'using a grid system' before, would you mind explaining what that means and maybe showing me an example of what they looks like or where I could see one?
I have seen some of the work you have done and you are great, I am SO GRATEFUL to have received your input!
Thanks a billion,
Tina
Hi Tina,
It was my pleasure to look through what you developed and offer some feedback, I’m really pleased that you found it useful.
In answer to the additional questions you asked I’ll try to give the best responses I can, apologies for the long-winded reply!
Your instructional design skills are likely to improve with every course you develop. The main thing that will ensure that this is the case is that you are willing to ask for advice and are happy to consider feedback from others. It might be worth setting up a questionnaire for your users to ask what they like/dislike about the course and whether they have any suggestions for future developments. You don’t have to act on all of their comments but they might bring up one or two things that you hadn’t thought of. It sounds as though you're doing this already in a way by drip-feeding the content in to your user base.
Another really popular way to hone your skills is via the E-Learning Challenges. The subject matter is varied and the community is always there to provide feedback, giving you another opportunity to pick up some tips.
In my opinion, to improve graphic design skills you need to practise a lot and always take the time to see what is going on around you. Yes, look at the work of others online but try to get away from your computer to look at design books and magazines, for me some of the very best graphic design happens in the print world. I think that this happens because unlike the countless iterations that it is possible for us to create in our digital work, print designers have to get it right quicker, which in turn focuses their minds and skills. This is certainly where I take a lot of my inspiration from.
The layouts alone in the magazines might give you some great ideas for laying out your course content. Some of the infographics designed for print are sublime, my theory is that the designers have a limited amount of space to use so they have to use it well and really only use the info that is most relevant. I find a lot of the infographics online aren’t nearly as well-designed, probably because the designers don’t need to cut any data, they just keep scrolling until they’re done.
Grid systems are also another way to tighten up your layouts and they help give a consistent look to the screens throughout your course. Here’s a starting point to help explain the principles: http://www.designersinsights.com/designer-resources/using-layout-grids-effectively
The site map, or blueprint for your course is useful to show how your screens interconnect. It should also help you identify any screens that don’t have a back button for example or ones that are difficult to find. Once you know where these screens are you can decide whether it works or whether you want to make any modifications. Here's a brief overview of how they can be used for web design, the principles are the same for e-learning, specifically the Flow chart section: http://ucm.rutgers.edu/web-ecommunications/information-architecture-wireframes
Again, this was EXTREAMLY helpful! Hoping to get another e Learning out in the next couple of months, and will definitely be using these tools.
Thanks again man!
Thanks,
Tina G.
HMIS Trainer
Ending Community Homeless Coalition
tinagriego@austinecho.org
"Data is one of the most powerful tools we have in our toolkit to end homelessness"
GEMO - good enough move on. This principle has assisted me in my never-ending pursuit of the perfect course, interaction or graphic.
This discussion is closed. You can start a new discussion or contact Articulate Support.