Automatic flowchart-based webpage generation for troubleshooting or task completion without manual programming

Flowchart-based webpages may be automatically generated for troubleshooting or task completion without manual programming by a website developer. A canvas may be displayed that can be used for placement of a plurality of nodes to be associated with respective webpages. Content to include in the respective webpages for the nodes may be received, and connections between the nodes may be validated based on node type. Each node type may have its own respective connection rules. The webpages may be generated for the respective nodes based on the node content and the validated connections between the nodes when the validation succeeds.

FIELD

The present invention generally pertains to automatic webpage generation, and more specifically, to automatic flowchart-based webpage generation for troubleshooting or task completion without manual programming by a website developer.

BACKGROUND

Conventional approaches to documentation for troubleshooting a problem or showing how to accomplish a task make it difficult for subject matter experts to accurately capture their methods and thought processes. This leads to generic documentation that may leave end users guessing as to how it applies to their specific situation. Furthermore, the subject matter expert generally has to work with a documentation expert to create the documentation, which may lead to inefficiency and communication problems. Accordingly, an improved way to generate documentation and/or show users how to accomplish a task may be beneficial.

SUMMARY

Certain embodiments of the present invention may be implemented and provide solutions to the problems and needs in the art that have not yet been fully solved by conventional webpage generation systems. For example, certain embodiments of the present invention are directed to a software tool that facilitates the creation of webpages by designers, such as subject matter experts, that include flowcharts for troubleshooting a problem or explaining how to accomplish a task.

In one embodiment of the present invention, a computer program is embodied on a computer-readable storage medium. The computer program is configured to cause at least one processor to display, on a display device, a canvas and a plurality of selectable nodes that a designer can select and place in desired positions on the canvas. Each node is associated with a respective webpage. The computer program is also configured to cause the at least one processor to display, on the display device, a node design screen allowing the designer to add content to the respective webpage associated with the node when the designer chooses to edit a node. The node design screen is customized for a type of the node selected by the designer. The computer program is further configured to cause the at least one processor to receive content to include in the respective webpage for each node and connections between the nodes from the designer, and validate the connections between the nodes based on the node type. Each node type has its own respective connection rules. Additionally, the computer program is configured to cause the at least one processor to generate the webpages for the respective nodes based on the node content and the connections between the nodes when the validation succeeds. The nodes and connections collectively form a flowchart on the canvas. Manual programming by the designer is not required to design the flowchart and generate the webpages.

In another embodiment of the present invention, a computer-implemented method includes displaying, by a computing system, a canvas and a plurality of nodes. Each node is associated with a respective webpage. The computer-implemented method also includes displaying, by the computing system, a node design screen allowing the designer to add content to the respective webpage associated with the node. The node design screen is customized for a type of the node selected by the designer. The computer-implemented method further includes receiving, by the computing system, content to include in the respective webpage for each node from the designer, and automatically generating, by the computing system, connections between the nodes based on the types of the nodes and the content received from the designer. Additionally, the computer-implemented method includes validating, by the computing system, the connections between the nodes based on the types of the nodes. Each node type having its own respective connection rules. The computer-implemented method also includes generating, by the computing system, the webpages for the respective nodes based on the node content and the connections between the nodes when the validation succeeds.

In yet another embodiment of the present invention, an apparatus includes a display device, physical memory including computer program instructions, and at least one processor configured to execute the computer program instructions. The at least one processor is configured to display, on the display device, a canvas that can be used for placement of a plurality of nodes to be associated with respective webpages. The at least one processor is also configured to receive content to include in the respective webpages for the nodes and validate connections between the nodes based on node type. Each node type has its own respective connection rules. The at least one processor is further configured to generate the webpages for the respective nodes based on the node content and the validated connections between the nodes when the validation succeeds.

DETAILED DESCRIPTION OF THE EMBODIMENTS

Some embodiments of the present invention are directed to a software tool (i.e., application, computer program, etc.) that facilitates the creation of webpages by designers (e.g., subject matter experts) that include flowcharts for troubleshooting a problem or explain how to accomplish a task. These webpages are made available to end users of the webpages (hereinafter “users”). The software does not require programming knowledge on the part of the users since the webpages are generated automatically.

In some embodiments, the flowcharts include nodes such as start, end, action, decision, and selection, but any desired node types may be included or be custom designed by a designer. During the flowchart creation process, when the designer clicks a given node, an input form is displayed that enables the designer to enter text, pictures, videos, etc. that he or she wants to include in the node. If the node is an action node, a field may be included for what action the user should perform. On the other hand, a decision node may have a field for a user decision, such as yes/no, true/false, etc. A selection node may have fields for items for a user to select. Output links may be included that lead to a next node based on the designer's input for the current node.

Once the designer completes the flowchart by creating all of the desired nodes and linking the nodes with connectors, the flowchart may be verified to check that nodes are properly connected and links are properly labeled. After verification, a series of webpages may be automatically built that correspond to each of the nodes. These webpages may link to one another as designated by the flowchart, and the logic and flow of the webpages may mirror that of the flowchart.

Some embodiments have significant advantages over conventional solutions. For example, most webpage generation tools require someone skilled in webpage design, and takes substantial time. The additional cost for a skilled web designer would not be needed. Communication problems may also be avoided since a subject matter expert may create the content. Furthermore, changes can be made rapidly. Conventional webpage generation tools typically lack an easy way to control which webpages an end user sees and in what order the end user views them. This lack of control may make it difficult for the designer to simply and accurately convey troubleshooting and task completion, for example. With conventional websites, the end user would generally have a hard time knowing which page to go to next. Some embodiments force the end user on the path chosen by the designer, so there is no confusion.

Many companies could benefit from improved customer self-help with respect to performing a task or troubleshooting a problem. For example, a website showing how to assemble furniture or a bicycle could be made clear and could be highly customized. Troubleshooting flowcharts presented on webpages with text, pictures, and/or video, for instance, may make it easier to help customers resolve problems. Subject matter experts could build the websites themselves, which may improve quality. Further, because the decision and selection nodes allow the customer to select what he or she will see next, the customer would only see relevant information. When a customer can engage in self-help, he or she tends to feel more in control and also feel better about the company's products. Additionally, help desk costs can be significantly reduced.

FIG. 1is a screenshot of a graphical user interface (“GUI”)100, according to an embodiment of the present invention. In some embodiments, GUI100may be displayed, for example, on display1325by computing system1300. GUI100includes a node selection dropdown menu110and a connector selection dropdown menu120. Connectors form connections between nodes. However, in some embodiments, connectors may be formed automatically based on the node type and/or designer input from the node design screen. Furthermore, any suitable mechanism may be used to select the nodes and connectors, as would be understood by one of ordinary skill in the art. Also, any other menu options may be included as a matter of design choice.

The node types in node selection dropdown menu110include action112, decision,114, and selection116, although other node types may be provided depending on the implementation. When a designer selects a node type or a connector type with mouse pointer140, the selected component is displayed on canvas130. In some embodiments, once on canvas130, the designer may move components around on the canvas using the mouse, and when proximate to one another, components may automatically perform actions such as automatically connecting a connector to a node when an end of the connector and the node are proximate to one another. In this manner, the designer can add the desired components to the canvas and make the desired connections. A start node may automatically be created when a designer creates a new flowchart project in some embodiments.

FIG. 2is a screenshot of another GUI200, according to an embodiment of the present invention. In some embodiments, GUI200may be displayed, for example, on display1325by computing system1300. GUI200includes a component selection area210. Component selection area210includes an action node component212, a decision node component214, a selection node component216, and a connector component218. Other node and/or connector types may be provided depending on the implementation, such as a start node and an end node, for example. Also, any desired menu options may be included as a matter of design choice.

A designer may select a node or a connector with mouse pointer230and drag the selected component to canvas220. In some embodiments, once on canvas220, the designer may move components around on the canvas using the mouse, and when proximate to one another, components may automatically perform actions such as automatically connecting a connector to a node when an end of the connector and the node are proximate to one another. In this manner, the designer can add the desired components to the canvas and make the desired connections. A start node may automatically be created when a designer creates a new flowchart project in some embodiments.

FIG. 3is a screenshot of a start node design screen300, according to an embodiment of the present invention. In some embodiments, start node design screen300may be displayed, for example, on display1325by computing system1300. In some embodiments, there is only one start node, and the start node may have only one output and no inputs, which may be checked during validation. In the alternative, for this node and/or any other nodes, some embodiments may not allow the designer to create unpermitted connections and/or nodes. For instance, if the designer tried to create a second start node, or tried to provide an input for the start node, the designer may be prevented from doing so by the software. The software may also check to make sure that there is only one start node.

Start node design screen300includes a text box310for a designer to enter a node title and a text box320for the designer to enter text associated with the start node. Radio buttons330allow the designer to indicate whether images should be included in the start node. Similarly, radio buttons340allow the designer to indicate whether video should be included in the start node. While not shown here, the designer may also designate audio to play with the start node in some embodiments. Start node design screen300further includes a text box350for a designer to enter a link to a company logo. While not shown in this embodiment, input fields for providing company information, contact information, or any other desired information may be included on the screen.

FIG. 4is a screenshot of an action node design screen400, according to an embodiment of the present invention. In some embodiments, action node design screen400may be displayed, for example, on display1325by computing system1300. In some embodiments, an action node has a field for what action a user should perform, along with a title and any desired media. The action node generally must have only one output and at least one input. This may be checked during verification, as discussed in more detail below.

Action node design screen400includes a text box410for a designer to enter a node title and a text box420for a designer to enter a desired action description. Radio buttons430allow the designer to indicate whether images should be included in the action node. Similarly, radio buttons440allow the designer to indicate whether video should be included in the action node.

If the designer decides to include images, a dropdown box may be shown that enables the designer to select the number of images to display, as well as a button to search a file system for each image or provide a box to input the link manually. Where the designer is allowed to select the image from the file system, the link to the image may be determined automatically in some embodiments. If the designer decides to include video, a button may appear allowing the designer to search a file system for the video or provide a box to input the link manually. Where the designer is allowed to select the image from the file system, the link to the image may be determined automatically in some embodiments. While not shown here, the designer may also designate audio to play with the action node in some embodiments.

FIG. 5is a screenshot of a decision node design screen500, according to an embodiment of the present invention. In some embodiments, decision node design screen500may be displayed, for example, on display1325by computing system1300. In some embodiments, a decision node has a field for a question to answer “yes” or “no”, or “true” or “false”, to, along with a title and any desired media. The decision node generally must have at least one input and a true and false output. This may be checked during verification, as discussed in more detail below. Decision node design screen500includes a text box510for a designer to enter a node title and a text box520for the designer to enter a desired question. Text box530allows the designer to enter the true path link, and text box540allows the designer to enter the false path link.

Radio buttons550allow the designer to indicate whether images should be included in the decision node. Similarly, radio buttons560allow the designer to indicate whether video should be included in the decision node. If the designer decides to include images, a dropdown box may be shown that enables the designer to select the number of images to display, as well as a button to search a file system for each image or provide a box to input the link manually. Where the designer is allowed to select the image from the file system, the link to the image may be determined automatically in some embodiments. If the designer decides to include video, a button may appear allowing the designer to search a file system for the video or provide a box to input the link manually. Where the designer is allowed to select the image from the file system, the link to the image may be determined automatically in some embodiments. While not shown here, the designer may also designate audio to play with the decision node in some embodiments.

FIG. 6is a screenshot of a selection node design screen600, according to an embodiment of the present invention. In some embodiments, selection node design screen600may be displayed, for example, on display1325by computing system1300. In some embodiments, a selection node has fields for a user to select between multiple items. The user may read the choices and select the appropriate choice. The user may then be shown the next appropriate webpage based on the choice path. The choice path may be generated automatically based on node connectors. In some embodiments, the selection node has at least one input and one output per selection.

Selection node design screen600includes a text box610for a designer to enter a node title and a text box620for the designer to enter a desired question. The designer may select the number of choices using dropdown menu630. In some embodiments, dropdown menu630may be replaced with a text box or any other suitable mechanism for selecting/entering a desired number of choices.

Upon selecting a number of choices with dropdown menu630, corresponding text boxes may appear for each choice. For instance, inFIG. 6, the designer has selected two choices using dropdown menu630. Text boxes640,650,660, and670are shown that allow the designer to enter text for choice 1, a link for choice 1, text for choice 2, and a link for choice 2, respectively. However, in some embodiments, any desired number of choices may be provided. While not shown here, the designer may also be able to designate images, audio, and/or video to include with the selection node in some embodiments.

FIG. 7is a screenshot of an end node design screen700, according to an embodiment of the present invention. In some embodiments, end node design screen700may be displayed, for example, on display1325by computing system1300. In some embodiments, there can be only one end node. In certain embodiments, the end node can have at least one input and no outputs. However, in some embodiments, there may be a webpage link that will take a user from the end node webpage to a page associated with a different flowchart, or to a different webpage not found in any flowchart.

End node design screen700includes a text box710for a designer to enter a node title and a text box720for the designer to enter text associated with the end node. Radio buttons730allow the designer to indicate whether images should be included in the end node. Similarly, radio buttons740allow the designer to indicate whether video should be included in the end node. While not shown here, the designer may also designate audio to play with the end node in some embodiments. End node design screen700further includes a text box750for the designer to enter a link to another webpage. For instance, a link to a company customer service page could be included to provide a user with further assistance.

FIG. 8is a screenshot of a custom node design screen800, according to an embodiment of the present invention. In some embodiments, custom node design screen800may be displayed, for example, on display1325by computing system1300. Custom node design screen800includes a node properties section810that allows a designer to set various properties for the custom node. The designer may enter a name and title for the custom node in text boxes812and814, respectively. Node properties section810also includes dropdown menus816and818where the designer can specify the number of links in and links out, respectively. In certain embodiments, a unique node shape for the custom node may also be chosen.

Custom node design screen800also includes a component selection section820that has various components the designer can select and place on canvas830. Component selection screen820includes a question box template821, a text box template822, an images radio template823, a video radio template824, an audio radio template825, and a label template826. However, other components may be included as a matter of design choice, and as would be understood by one of ordinary skill in the art in light of the present disclosure. The components of component selection section820may have similar functionality to those discussed with respect to the start, action, decision, selection, and end nodes ofFIGS. 3-7in some embodiments.

It is possible to create any desired custom node in some embodiments. Also, other node types could be included with the software. For example, a designer could create, or the software could include, a fill in the blank node where a user would type in an answer. The fill in the blank node may have a title and optional text and/or media. The software may come up with a list of matching partial or complete words. The software may use regular expressions to compare the words in the match list with the user's input. A match may cause the user to go to one webpage, whereas a mismatch may cause the user to go to another webpage.

Another node type in some embodiments is a multiple choice node. The designer may select the number of possible answers to be displayed, along with which answer(s) must be selected for a correct choice. The correct choice may cause the user to go to one webpage, whereas an incorrect choice may cause the user to go to another webpage.

During the verification process, the match path may be determined along with the no match path in a manner similar to the decision node. The fill in the blank node could be used to create a game where the user is given a clue. If the user guesses correctly, he or she goes to one webpage, and if the user guesses incorrectly, he or she either stays on the current page or goes off on another path.

A game could be created where the user has to move around a city to locate a spot hinted at by a clue. Once there, the user may have to answer a question based on something special about the site, and then go to the next step. A wrong answer could create a longer path to the final destination. The fill in the blank node could also be used for testing or guided learning where if a user knows something, he or she continues on. If not, another path may be taken to go over the material.

The multiple choice node could also be used for testing or guided learning where if a user knows something, he or she continues on. If not, another path may be taken to go over the material.

FIG. 9is an example design of a flowchart900for a website, according to an embodiment of the present invention. When a designer double clicks or otherwise selects a node, a respective design screen for that node may appear, such as the screens ofFIGS. 3-6and8or variants thereof. The process begins with a start node910. Next, the process flow proceeds to a decision node920that ascertains whether the user wants to buy a car. If the user answers no, the process proceeds to an end node950, which may show websites and contact information for when a user may be ready to consider buying a new car in the future.

If the user answers yes at920, the process proceeds to selection node930where a user can select between a Ford®, a Toyota®, and a BMW®. The user is then taken to respective action nodes940,942,944that show a model for the selected make of the car. The process then proceeds to end node950. Naturally, this example is too simplistic for many practical applications, but is provided to give a sense of how nodes may interconnect based on the node rules.

Once the flowchart is completed, the designer may select a verify menu option that performs validation by checking, for example, that the nodes are properly connected and the links are properly labeled. To determine how the webpages will link to one another, each node may be given a unique ID. Each node may be checked for outgoing links, as well as the node that each link is associated with. Once the destination node is determined, the source node may save that information in the appropriate location. For example, an action node may store the information in the next step variable. A decision step may iterate through the two output links, determine what nodes the links (e.g., for true and false or yes and no) are attached to, and save the ID of the node attached to the true, or yes, link in the true variable. The same may occur with the false link. The selection node may use a similar process to identify and save the ID of the node attached to the link for each choice.

Once each node has the information about its outgoing links, the webpages can be built. The text, picture locations, video locations, and next nodes may be placed into a Hypertext Markup Language (“HTML”) string that builds the webpage. However, in some embodiments, any suitable markup language or other programming language may be used. In certain embodiments, dynamic technologies such as ASP.NET may be used. The string that creates the header portion of a webpage may have the text variable for the title. Other strings may build the question display, the action display, and the video and/or picture portion of the page. For the start and action nodes, a “next” button may have the unique ID of the next node in the link field. Since each webpage may be saved with the unique ID generated earlier, the link field matches the correct webpage. For the decision node, the yes and no, or true and false, buttons may have respective link fields loaded with the correct unique ID. The same may be true of the select button. In some embodiments, webpages are built on HTML and Cascading Style Sheet (“CSS”) templates with the information input by the designer going to predetermined locations on the webpage. The designer may change the look of a page by selecting a different template, but the information input by the designer may be on the page, just in a different layout, color scheme, etc.

The webpages and media may be saved to memory and the start webpage, which may be named index.html, for example, can be displayed in a browser. The start webpage may show the title, text the designer entered, and pictures and/or video, along with a next button. When the next button is pressed, the next webpage may be displayed. The decision webpage may have a yes and no, or true and false, button that will take the user to the proper webpage. The select webpage may have buttons with labels that show the user what button to press to go to the appropriate page.

As an alternative way to save and deliver webpages, some embodiments may employ a database to save step information. A canvas to create a flowchart may be provided, which may be similar toFIGS. 1 and 2above, for instance. A serialized version of the flowchart may be saved in a project table in a suitable format, such as a binary large object (“BLOB”). A separate table may be used to save step information. When a node is created, the node may be given a unique ID based on the step1D associated with the node. Associated with the step1D may be all information needed to create the webpages, such as the title, text, and media. When the flowchart is verified, the step information may be updated with the step1D(s) based on the requirements of the currently verified step.

Another table may provide the step1D based on a user-friendly URL. The URL could be something like companyname/flowchartname, which may be used to identify the appropriate first step in the steps table. The information contained in the first step record may be used to generate a webpage. After that, the flow through the webpages may be determined by the type of webpage (start, action, decision, select, end, etc.) and what button the user selected. For example, if the webpage was a selection page, and the user chose the “A” selection button on the current webpage, the select node “A” field of the current step record may be used to locate the next step record. The corresponding field may be used for the next step for other possible button selections, such as next, yes, no, B, etc. The newly selected record on the steps table may be used to generate a webpage. The process may repeat until the end webpage is reached. Database design is quite flexible in some embodiments, so there are various ways to design and layout a database to accomplish the desired features of various embodiments.

FIG. 10is a flowchart1000illustrating a method for designing flowchart-based webpages, according to an embodiment of the present invention. In some embodiments, the method may be implemented, for example, by computing system1300ofFIG. 13. The method begins with displaying a canvas and a plurality of selectable nodes at1010. A designer may select the nodes and place them in desired positions on the canvas. Each node is associated with a respective webpage that will be generated.

When the designer chooses to edit a node, a node design screen is displayed at1020, allowing the designer to add content to the respective webpage associated with the node. The node design screen may be customized for the type of the node selected by the designer. Content to include in the respective webpage for each node and connections between the nodes are received from the designer at1030.

The connections between the nodes are validated based on the node type at1040. Each node type may have its own respective connection rules. When the validation succeeds, the webpages may be generated for the respective nodes at1050based on the node content and the connections between the nodes. The nodes and connections may collectively form a flowchart on the canvas. Manual programming by the designer is generally not required to design the flowchart and generate the webpages.

FIG. 11is a flowchart1100illustrating another method for designing flowchart-based webpages, according to an embodiment of the present invention. In some embodiments, the method may be implemented, for example, by computing system1300ofFIG. 13. The method begins with displaying a canvas and a plurality of nodes at1110. Each node may be associated with a respective webpage.

A node design screen is displayed at1120, allowing the designer to add content to the respective webpage associated with the node. The node design screen may be customized for the type of the node selected by the designer. Content to include in the respective webpage for each node is received from the designer at1130. The connections between the nodes are automatically generated at1140based on the types of the nodes and the content received from the designer.

The connections between the nodes are validated at1150based on the types of the nodes. Each node type may have its own respective connection rules. When the validation succeeds, the webpages for the respective nodes are generated at1160based on the node content and the connections between the nodes.

FIG. 12is a flowchart1200illustrating yet another method for designing flowchart-based webpages, according to an embodiment of the present invention. In some embodiments, the method may be implemented, for example, by computing system1300ofFIG. 13. The method begins with displaying a canvas at1210that can be used for placement of a plurality of nodes to be associated with respective webpages.

Content to include in the respective webpages for the nodes is received at1220. Connections between the nodes are validated based on the node type at1230. Each node type may have its own respective connection rules. When the validation succeeds, the webpages for the respective nodes are generated at1240based on the node content and the validated connections between the nodes.

FIG. 13illustrates a computing system1300configured to assist with designing and generating flowchart-based webpages, according to an embodiment of the present invention. System1300includes a bus1305or other communication mechanism for communicating information, and processor(s)1310coupled to bus1305for processing information. Processor(s)1310may be any type of general or specific purpose processor, including a central processing unit (“CPU”) or application specific integrated circuit (“ASIC”). Processor(s)1310may also have multiple processing cores, and at least some of the cores may be configured for specific functions. System1300further includes a memory1315for storing information and instructions to be executed by processor(s)1310. Memory1315can be comprised of any combination of random access memory (“RAM”), read only memory (“ROM”), flash memory, cache, static storage such as a magnetic or optical disk, or any other types of non-transitory computer-readable media or combinations thereof. Additionally, system1300includes a communication device1320, such as a transceiver, to wirelessly provide access to a communications network.

Non-transitory computer-readable media may be any available media that can be accessed by processor(s)1310and may include both volatile and non-volatile media, removable and non-removable media, and communication media. Communication media may include computer-readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media.

Processor(s)1310are further coupled via bus1305to a display1325, such as a Liquid Crystal Display (“LCD”), for displaying information to a user. A keyboard1330and a cursor control device1335, such as a computer mouse, are further coupled to bus1305to enable a user to interface with system1300. However, in certain embodiments such as those for mobile computing implementations, a physical keyboard and mouse may not be present, and the user may interact with the device solely through display1325and/or a touchpad (not shown). Any type and combination of input devices may be used as a matter of design choice.

In one embodiment, memory1315stores software modules that provide functionality when executed by processor(s)1310. The modules include an operating system1340for system1300. The modules further include a webpage design/generation module1345that is configured to assist a designer with designing and generating flowchart-based webpages. System1300may include one or more additional functional modules1350that include additional functionality.

The method steps performed inFIGS. 10-12may be performed by a computer program, encoding instructions for the nonlinear adaptive processor to perform at least the methods described inFIGS. 10-12, in accordance with embodiments of the present invention. The computer program may be embodied on a non-transitory computer-readable medium. The computer-readable medium may be, but is not limited to, a hard disk drive, a flash device, a random access memory, a tape, or any other such medium used to store data. The computer program may include encoded instructions for controlling the nonlinear adaptive processor to implement the methods described inFIGS. 10-12, which may also be stored on the computer-readable medium.

The computer program can be implemented in hardware, software, or a hybrid implementation. The computer program can be composed of modules that are in operative communication with one another, and which are designed to pass information or instructions to display. The computer program can be configured to operate on a general purpose computer, or an ASIC.