The Interactive Circle

     I’m a big fan of this one and I don’t see people using it very often. The interactive circle is a fantastic and creative way to display information in an interactive way. It is particularly useful for breaking larger topics into smaller sections. I’ll leave two examples of where I used the interactive circle to break down a larger topic below. 

Interactive Circle From
Knowthyopponent.com

     Below is an interactive circle that I used in a website called knowthyopponent.com. The purpose of the website is to create an algorithm that most effectively tells the user how to prepare for an upcoming fight. Essentially the interactive circle below organizes the information you want the user to absorb into broad interactive categories. Here there are six of them (Cardio, Tracking, Unique, Recovery, Supplemental and Video Library). There is also an icon to go along with the text that describes each of these to better help guide the user. When the user interacts with the circle text appears in the middle of the ring. Try hovering over the circles below to see what they say!

Cardio

Cardiovascular training is possibly the most important aspect of preparing for mixed martial arts. Our algorithm will determine what your approach should be based on the input you give us. 

Tracking

One of the most critical aspects of training is building towards small goals and tracking your progress towards that goal. Our algorithm will provide you with a series of small goals leading up to your fight as well as journal so that you can track your own progress. Our algorithm will actually adjust if you don't reach your goals. 

Unique

We believe that every strength and conditioning program should be unique and custom tailored to the individual. With the amount of inputs we ask no two programs will be the same. 

Recovery

Mixed Martial Arts is perhaps the most brutal sport in the world and if you want to have any kind of longevity in this sport you are going to need to take recovery seriously. Our Algorithm will adjust to counter balance the training we provide and keep you feeling great through out your whole camp. 

Supplemenat

We give custom advice on using supplements completely tailored to you based on our algorithm. 

Video Library

We provide a high quality video library of every single exercise and recovery technique that we prescribe. 

Second Style of Circle
and Second Style of Action

     The second style of interactive circle we have displayed below. Notice it is more of a rainbow than a ring like the example above. Another thing that is different about this version is that in order to interact with it you have to click on it instead of hovering over it like the one above. There are certain times when you should use one or the other. In my experience the ring works best for displaying methodologies that are circular in nature. Like my UX design method or something like the scientific method. The rainbow version of the interactive circle is better when your process is linear. A step by step process with a definitive beginning middle and end. A good example of that might be losing weight or displaying the step by step plan to prepare for a competition. 

Item 1
Present your content in an attractive Circle layout item 1. You can highlight key information with click or hover effects and style it as per your preference.
Item 2
Present your content in an attractive Circle layout item 2. You can highlight key information with click or hover effects and style it as per your preference.
Item 3
Present your content in an attractive Circle layout item 3. You can highlight key information with click or hover effects and style it as per your preference.
Item 4
Present your content in an attractive Circle layout item 4. You can highlight key information with click or hover effects and style it as per your preference.
Item 5
Present your content in an attractive Circle layout item 5. You can highlight key information with click or hover effects and style it as per your preference.
Item 6
Present your content in an attractive Circle layout item 6. You can highlight key information with click or hover effects and style it as per your preference.